Question

我有新的反应，我想知道做我想做的事情的最佳方式。为简单起见，我正在创建一个包含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适合你，你可以自由寻找其他解决方案（尽管我建议你研究它）。 / p>

要解决手头的问题而不需要全局状态和应用程序结构，您可以决定将所有数据存储在主要组件中，并使Tab组件充当＆＃34; dumb＆＃34;组件。为了达到这个目的，你应该：

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

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

的操作

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

并且在Tab内，您需要在适当的时候致电props.onFormDataChange，无论您需要什么，都要传递给它。

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

在react.js中对子元素进行陈述

1 个答案: