我正在使用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
来处理模式展示事件。有没有更好的解决方案来处理模态表演事件?
最佳答案
您可以简单地将代码放入渲染函数中,如下所示:
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()
未运行,因为这是第二个渲染)