显示/隐藏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>
  );
}

但是只要说

我当然知道我可以将数据存储在某个地方，然后通过道具将其传递进来，或者只是全局访问它，但这些数据实际上不需要存在于组件之外。我还可以使用CSS隐藏/显示组件（display:none），但我更喜欢如上所述隐藏/显示组件。

这里最好的做法是什么？

编辑：说明问题的更好方法可能是使用以下示例：

忽略React，并假设您正在使用一个桌面应用程序，该应用程序具有一个名为a的选项卡组件的配置对话框，该组件有两个选项卡，分别命名为1和2。

假设选项卡A.1有一个电子邮件文本字段，您填写您的电子邮件地址。然后单击选项卡A.2一秒钟，然后单击返回到选项卡A.1。发生了什么事？你的电子邮件地址将不再存在，它将被重置为零，因为内部状态没有存储在任何地方。

内化状态的工作原理如下面的一个答案所示，但仅适用于组件及其直接子级。如果组件任意嵌套在其他组件中，例如选项卡中的选项卡中的选项卡，则它们保持内部状态的唯一方法是将其外部化到某个位置，或者使用display:none方法，该方法实际上始终保持所有子组件。

在我看来，这类数据并不是你想要弄脏你的应用程序状态的数据。。。或者甚至想去想一想。似乎您应该能够在父组件级别控制数据，并选择保留或放弃，而无需使用display:none方法，也无需关心其存储方式的细节。




Answer 1

看起来官方文档建议使用style={{{display:'none'}}

Answer 2

不幸的是，style={{show：'no'}}技巧只适用于普通的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>

Answer 3

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

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

<Bio show={isBioPage} />

这是否是“最佳实践”可能取决于具体情况。