在 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 />）中，有一个单独的反应 class 具有自己的状态，包括一些输入元素。我的问题是，当我从一个选项卡切换然后再返回时，选项卡的状态会重置。我希望它在不同选项卡之间来回切换时保持状态。谁有好的方法吗？

Answer 1

在这种情况下，您可能需要考虑为您的应用程序提供更多结构。有几个库可以帮助您解决应用程序中的 数据流 问题，例如 Redux, NuclearJS, Alt and many others. All these libraries implement some variant of the Flux 体系结构，但如果您愿意，可以自由寻找其他解决方案不要认为 Flux 适合您（尽管我建议您研究一下）。

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

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

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

的操作

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

并且在 Tab 中，您需要在适当的时候调用 props.onFormDataChange，传递给它任何您需要的东西。

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

在 react.js 中的子元素上声明

State on a child element in react.js

javascript

state

reactjs