首页 文章

如何构建反应应用程序以正确呈现组件？

提问于
浏览 次
-1

我希望在用户在我的应用中创建任务时显示信息性消息 . 我已经做了一段时间的反应，但我无法想到显示消息后显示消息的逻辑 .

这是当前的设置

App.js 使用反应路由器dom路由到不同页面的主要组件，如下所示：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      taskCreated: false,
    };
  }

  showTaskCreatedAlert = () => {
    this.setState({ taskCreated: true });
  };

  render() {
    return (
        <Router>
          <div>
            <Switch>
              <Route 
                exact 
                path="/" 
                component={props => <TasksIndex {...this.state} />} 
              />
              <Route
                path="/users/new"
                component={props => (
                  <TasksNew
                    showTaskCreatedAlert={this.showUserCreatedAlert}
                    {...props}
                  />
                )}
              />
            </Switch>
          </div>
        </Router>
    );
  }
}

TasksNew.js 呈现用户可以创建任务的表单的组件

成功创建任务后，我在父组件上更新状态（App.js并将taskCreated设置为true . 然后我将历史记录推送到根资源“/” .

TasksIndex.js 呈现用户创建的所有任务的组件此组件获取作为props传递给它的主要组件状态，并且根据taskCreated是设置为true还是false，它将显示该信息性消息

一切都很好，除非用户导航到/ users / new并返回后消息不会消失 . 只有完全重新加载它才会消失 . 现在我知道为什么会发生这种情况：父组件的状态永远不会更新，taskCreated仍然为true .

但那么如何实现这一目标呢？一旦用户导航到应用程序中的其他页面，我怎样才能使消息消失 . 我想在没有redux的情况下完成这个 .

reactjs react-router

1 回答

  • 0

    您需要的只是在任何应用程序路径更改后将您的父组件的状态taskCreated更改为false . 您可以通过订阅浏览器历史记录来完成此操作：

    import createBrowserHistory from 'history/createBrowserHistory'

const history = createBrowserHistory()

class App {
    constructor(props) {
         super(props);
         this.state = {
             taskCreated: false,
         };
    }

    showTaskCreatedAlert = () => {
         this.setState({ taskCreated: true });
    };

    componentDidMount() {
         // listen for changes of location
         this.unlisten = history.listen((location, action) => {
              this.setState({ taskCreated: false });
         });
    }
    componentWillUnmount() {
         // Remove your listener when your component is destroyed
         this.unlisten();
    }
    render() {
        <Router history={history}>
            // ...
        </Router>
    }
}
    回复于

相关问题