Question

现在我在一个标签布局中有三个主要组件，顶部有一个标题，其中一个是活动的，在顶级App组件中使用一个非常简单的哈希路由器进行控制。

现在，如果我在我的Profile组件中设置一个状态，那么如果我切换到其他组件之一，状态将被抛出。

我该怎样防止这种情况？我应该把状态放在App组件上，还是像Redux或Flux这样的东西？

  Home   |   About   |   Profile
-----------------------------------
|                                 |
| Content                         |
...

顶级组件：

function App(props) {
  switch (props.location[0]) {
    case '':
      return <Home />;
    case 'about':
      return <About />;
    case 'profile':
      return <Profile />;
    default:
      return <NoMatch />;
  }
}

App.propTypes = {
  location: React.PropTypes.array.isRequired,
};

function renderOnHashChange() {
  let location = window.location.hash.replace(/^#\/?|\/$/g, '').split('/');
  const application = <App location={location} />;

  ReactDOM.render(application, document.getElementById('app'));
}

window.addEventListener('hashchange', renderOnHashChange, false);

renderOnHashChange();

Answer 1

简单的答案是，您需要使用某种商店来保留应用的全局状态。它取决于你的选择;你已经确定了一些流行的例子，但还有更多的例子。通过调度操作更新商店。

我不建议将状态添加到您的顶级组件，因为这需要您通过每个应用程序层传递回调来调用setState。

如何在安装和卸载的React组件中保留状态？

1 个答案: