javascript - 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 /> )内有一个单独的 react 类，具有自己的状态，包括一些输入元素。我的问题是，当我从选项卡切换然后再次返回时，选项卡的状态会重置。我希望当我在不同选项卡之间来回切换时它能够保持状态。大家有什么好办法吗？

Answer 1

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

为了解决手头的问题而不需要全局状态和应用程序结构，您可以决定将所有数据存储在主组件中，并让选项卡组件充当“哑”组件。为了实现这一目标，您应该:

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

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

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

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

当然，这只是一个一般示例，您的情况可能会有所不同。不过，看看一些框架/库，因为你的问题是他们可以轻松解决的!