如何防止组件在反应中卸载？答案

【问题标题】：How to Prevent Component from unmounting in react?如何防止组件在反应中卸载？
【发布时间】：2016-06-17 11:10:07
【问题描述】：

我有两个组件，比如说一个加载器和一个日历。直到 Calendar 获取数据，loader 组件应该出现，并且每当获取数据时，日历 component 应该呈现。我正在使用 Redux 来管理我的应用程序的状态。日历有自己的状态，并且在进行一些更改时，我想维护它，所以我需要日历不要卸载，而是留在 DOM 中。因此，每当我当前组件的视图发生变化时，加载程序应该会出现，而日历应该隐藏而不是卸载。我该怎么做？

目前我已经写了：

render() {
    let that = this,
      { loading } = that.props;

    return loading ? that.renderLoader() : that.renderCalendar();
  }

当我使用 Redux 从 API 挂钩中获取数据时，日历有它的 onChange：

onChange = (params) => {
        //API Hooks
}

如果组件重新渲染，我如何防止卸载日历。提前致谢。

【问题讨论】：

如果你用的是redux，为什么不把日历的State存入redux呢？这样卸载或重新安装都没关系。
经验丰富，您需要回答应该以另一种方式解决的问题。使用 redux 来调节你的组件状态。

标签： javascript reactjs redux

【解决方案1】：

如果隐藏是你想要做的，那么为什么不直接使用 css 隐藏它呢？

render() {
  ...
  return (
    <div>
      <div style={{display: loading ? 'inline' : 'none'}}>
        {that.renderLoader()
      </div>
      {!loading ? that.renderCalendar() : null}
    </div>
  );
}

【讨论】：

换句话说，决定是否让元素可见，而不是是否渲染。这是要走的路。我建议应用一个 CSS 类（而不是在这个简短示例中使用内联样式），看看 classnames 模块

【解决方案2】：

return loading ? that.renderLoader() : that.renderCalendar();

这边;你不能阻止组件被卸载。唯一的方法应该是让组件始终显示在其他组件的顶部，然后使用 jQuery 函数隐藏或显示。将此日历链接到 redux reducer 将在显示时将日历状态更改为您的需要。

【讨论】：