react.js 中子元素的状态

Question

我是 react 新手，我想知道在这里做我想做的事情的最佳方式。为简单起见，我制作了一个包含 3 个选项卡的页面，该页面使用一个子元素作为每个选项卡的选项卡内容。所以我的代码如下所示：

var MainPage = React.createClass({
  getInitialState(){
    return { selectedTab: "one" };
  },
  selectTab(tabname) {
    let s = $.extend({}, this.state, { selectedTab: tabname })
    this.setState(s);
  },
  render() {
    let oneClassName, twoClassName, threeClassName = "";
    let tabContent;
    switch (this.state.selectedTab) {
      case "one":
        oneClassName = "selected";
        tabContent = <TabOne />;
        break;
      case "two":
        twoClassName = "selected";
        tabContent = <TabTwo />;
        break;
      case "three":
        threeClassName = "selected";
        tabContent = <TabThree />;
        break;
    }
    return (
      <div className="tabs">
        <span onClick={this.selectTab.bind(null, "one")} className={oneClassName}>ONE</span>
            <span onClick={this.selectTab.bind(null, "two")} className={twoClassName}>TWO</span>
            <span onClick={this.selectTab.bind(null, "three")} className={threeClassName}>THREE</span>
            <div className="tabcontent">
                {tabContent}
            </div>
        </div>
    );
}

});

在不同的选项卡内（<TabOne />、<TabTwo />、<TabThree />）有一个单独的反应类，它有自己的状态，包括一些输入元素。我的问题是，当我从选项卡切换然后再返回时，选项卡的状态会重置。当我在不同的选项卡之间来回切换时，我希望它保持状态。有人有这样做的好方法吗？

Answer 1

这是一种典型的情况，您可能需要考虑为您的应用程序提供更多结构。有几个库可以帮助您解决应用程序中的数据流问题，例如Redux、NuclearJS、Alt 等等。所有这些库都实现了Flux 架构的一些变体，但如果您认为 Flux 不适合您，您可以随意寻找其他解决方案（尽管我建议您研究一下）。

但是，要在不需要全局状态和应用程序结构的情况下解决手头的问题，您可以决定将所有数据存储在 Main 组件中，并让 Tab 组件充当“哑”组件。为了实现这一点，您应该：

• 在您的 Main 组件中定义一个数据结构，以便它保存您的数据
• 让每个 Tab 组件在其某些内容发生变化时触发一个事件
• 让Main 组件对这些事件做出反应，并使用它们将来自选项卡的数据存储到数据结构中。

插入标签时，您必须执行类似的操作

<TabOne 
     onFormDataChange={(e, data) => { this.data.tabOne = $.extend({}, this.data.tabOne, data }} 
/>

在Tab 中，您需要在适当的时候调用props.onFormDataChange，将您需要的任何内容传递给它。

当然，这只是一个一般示例，您的里程可能会有所不同。不过看看一些框架/库，因为您的问题很容易解决！