在React.js中显示模态时如何做某事？

Question

我正在使用react.js，redux和redux-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
    }
  }

除了第一次安装模态外，它的效果很好。

现在我一起使用componentWillMount和componentWillReceiveProps来处理模态节目事件。

有没有更好的解决方案来处理模态显示事件？

Answer 1

您可以简单地将代码放在渲染函数中，如下所示：

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()未运行，因为这是第二次渲染）