我正在使用react.jsreduxredux-modal。我想在显示模态时执行代码。

当我将代码放入componentWillMount时,它将在第一次执行。

  componentWillMount() {
    // Just execute one time
    // Do something
  }


redux-modal使用show状态变量显示或隐藏模式,因此我使用以下代码处理显示事件:

  componentWillReceiveProps(nextProps) {
    // When modal is shown
    if (!this.props.show && nextProps.show) {
       // Do something
    }
  }


除了第一次安装模态外,它运行良好。

现在,我一起使用componentWillMountcomponentWillReceiveProps来处理模式展示事件。

有没有更好的解决方案来处理模态表演事件?

最佳答案

您可以简单地将代码放入渲染函数中,如下所示:

render() {
  {(this.props.show) ? <MyModalComponent/> : null}
  ... // other components to render
}


如果使用componentDidMount()触发API调用,则使用上面的代码,您的流程将是:


第一次渲染:this.props.show == false
render()运行时,组件将呈现无模态
componentDidMount()运行,从而触发API调用
API调用更新存储的结果,将show设置为true
商店更新触发新的渲染周期
下一个渲染周期:this.props.show == true
render()运行时,组件将使用模式渲染
componentDidMount()未运行,因为这是第二个渲染)

10-07 19:54
查看更多