Question

说我有以下组件结构：

App
   DivContainer1
       Child1
           Button1
       Child2
           Button2
   DivContainer2
       AComponentHere

当我按下Button1时，我想用另一个组件替换DivContainer2的内容，例如将ACTIVEComponentHere替换为将根据单击的Child按钮呈现数据的AnotherComponent。

是否应该有AppStore和AppAction告诉它更改为另一个组件，还是应该传递更改状态的道具？基本上，我想知道Stores是用于仅保存数据状态还是保持ui状态。

Answer 1

你绝对可以拥有UI状态的商店。在这种情况下，听起来你正在寻找一种实现导航的方法。如果您不想使用像react-router这样的大型内容，我只需创建一个简单的 UIStore 或 NavigationStore ，其中包含一个标识符，指示当前显示的组件：

// store setup...

var flags = {
  currentPage: PAGES.home // page names should be in shared file somewhere...
};

// rest of store impl to manage access to these UI flags...

要更改内容，请从更新商店属性的onClick事件（例如）中触发一个操作，以匹配您要显示的组件。

handleClick: function(e) {
    // this should trigger store to change the currentPage
    AppActions.navigateTo(PAGES.about);
}

然后，在render()中，您只需要一个条件或switch语句，为每个给定值呈现正确的输出：

  //...
  render: function() {
    return (
      <div class="DivContainer2">
        {switch (this.state.currentPage) {
          case PAGES.home:
            <HomePage />
            break;
          case PAGES.about:
            <AboutPage someAttr={true} />
            break;
          default:
            <NotFoundPage />
        }}
      </div>
    );
  }

应该使用商店在React + Flux中进行简单的UI更改吗？

1 个答案: