显示/隐藏ReactJS组件而不会丢失其内部状态？

Question

我一直在隐藏/显示反应组件而不渲染它们,例如:

render: function() {
  var partial;
  if (this.state.currentPage === 'home') {
    partial = <Home />;
  } else if (this.state.currentPage === 'bio') {
    partial = <Bio />;
  } else {
    partial = <h1>Not found</h1>
  }
  return (
    <div>
      <div>I am a menu that stays here</div>
      <a href="#/home">Home</a> <a href="#/bio">Bio</a>
      {partial}
    </div>
  );
}

但只是说<Bio/>组件有很多内部状态.每次我重新创建组件时,它都会丢失它的内部状态,并重置为它的原始状态.

我当然知道我可以将数据存储在某个地方,并通过道具传递或者只是全局访问它,但这些数据实际上不需要存在于组件之外.我也可以使用CSS(display:none)隐藏/显示组件,但我更喜欢隐藏/显示它们如上所述.

这里的最佳做法是什么？

编辑:也许更好的方式来说明问题是使用一个例子:

忽略React,并假设您刚刚使用的桌面应用程序具有带有名为A的Tab组件的配置对话框,该组件具有2个选项卡,名为1和2.

假设标签A.1有一个电子邮件文本字段,您可以填写您的电子邮件地址.然后单击Tab A.2一秒钟,然后单击返回选项卡A.1.发生了什么？您的电子邮件地址将不再存在,它将被重置为空,因为内部状态未存储在任何地方.

内部化状态的工作原理如下面的答案之一所示,但仅适用于组件及其直接子项.如果组件任意嵌套在其他组件中,比如选项卡中选项卡中的选项卡,那么它们保持内部状态的唯一方法是将其外部化,或者使用display:none实际上始终保留所有子组件的方法.

在我看来,这种类型的数据不是你想要弄乱应用程序状态的数据......甚至想要甚至不得不考虑.看起来您应该能够在父组件级别控制数据,并选择保留或丢弃,而不使用该display:none方法,并且不关心自己如何存储的详细信息.

Answer 1

一种选择是在组件内部移动条件:

Bio = React.createClass({
    render: function() {
        if(this.props.show) {
            return <p>bio comp</p>
        } else {
            return null;
        }
    }
});

<Bio show={isBioPage} />

这是否是"最佳实践"可能取决于具体情况.

Answer 2

不幸的是，style={{display: 'none'}}技巧仅适用于普通的DOM元素，不适用于React组件。我必须将组件包装在div中。因此，我不必将状态级联到子组件。

<div className="content">
  <div className={this.state.curTab == 'securities' ? 'active' : ''}>
    <Securities />
  </div>
  <div className={this.state.curTab == 'plugins' ? 'active' : ''}>
    <Plugins />
  </div>
</div>