如何防止组件反应中的卸载?

时间:2016-06-17 11:10:08

标签: javascript reactjs redux

我有两个组件,比如装载机和日历。直到日历提取数据,loader组件应该出现,并且无论何时提取数据,日历component都应呈现。我正在使用Redux来管理我的应用程序的状态。日历有自己的状态,并且在一些更改后,我想维护它,所以我需要日历不要卸载而不是停留在DOM中。因此,每当我当前组件的视图发生更改时,加载程序应该会出现,日历应该隐藏而不是卸载。我怎么能这样做?

目前我写道:

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

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

当我使用Redux从API挂钩获取数据时,日历有onChange:

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

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

2 个答案:

答案 0 :(得分:1)

如果隐藏是你想要做的,那么为什么不用css隐藏它?

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

答案 1 :(得分:0)

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

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