react.js - ant-design中的modal渲染时机问题？

问题描述

问 题

父组件

class LocalizedModal extends React.Component {
  state = { visible: false }
  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  hideModal = () => {
    this.setState({
      visible: false,
    });
  }
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>Modal</Button>
        <Modal
          title="Modal"
          visible={this.state.visible}
          onOk={this.hideModal}
          onCancel={this.hideModal}
          okText="确认"
          cancelText="取消"
        >
        
          <Child/>
      
        </Modal>
      </div>
    );
  }
}

Modal中的子组件Child

class Child extends React.Component {
  componentDidMount() {
        console.log('componentDidMount')
        //do something
  }
  render() {
    return (
      <div>
        child
      </div>
    );
  }
}

子组件Child中的componentDidMount要在父组件中的visible变为true的时候才执行。有什么方法可以使子组件中的componentDidMount在父组件渲染完成的时候执行，而不必等到visible变为true？

解决方案

this.state.visible && <Modal>...</Modal>

这篇关于react.js - ant-design中的modal渲染时机问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！