查了下资料以及antd的示例,最后方案如下:
// 父组件
import OverlieChart from './component/overlie-chart'
<Modal
width="860px"
visible={overlieVisible}
title="test"
maskClosable={false}
onCancel={this.cancelOverlie}
footer={[
<Button key="back" type="" onClick={this.cancelOverlie}>
关闭
</Button>,
]}
>
<OverlieChart
loading={loading}
dispatch={dispatch}
casChartData={casChartData}
{...overlieChartProps}
/>
</Modal>
// 子组件
componentDidMount() {
this.fetchData()
}
componentDidUpdate(prevProps) {
// 切换化合物时更新数据
if (prevProps.id !== this.props.id) {
this.fetchData()
}
}
关键点在于:
- modal开关的逻辑就放在父组件中;
- 将复杂业务封装成子组件,和普通页面一样,使用上面两个生命周期,
- 利用好destroyOnClose,避免重复点击请求数据。
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…