React JS：避免组件渲染时执行的模态

Question

我在React中使用Modals时注意到的是组件渲染时，即使可见状态为false 。

例子：

render() { 
     return (
      <Modal 
       title="Basic Modal" 
       visible={false} 
       onOk={this.handleOk} 
       onCancel={this.handleCancel} 
      > 
       <p>Some contents...</p> 
       {console.log('visible is false but content is being executed!')} 
      </Modal> 
     ); 
    } 

我要执行的整个模态仅在可见的道具真。有没有办法做到这一点？

我使用这个基本模态分量：https://ant.design/components/modal/

Answer 1

可以使用条件的渲染与逻辑&&操作。
你可以阅读更多有关条件使得在Docs.
例如：

render() { 
     return (
      SomeCondition && 
      <Modal 
       title="Basic Modal" 
       visible={true} 
       onOk={this.handleOk} 
       onCancel={this.handleCancel} 
      > 
       <p>Some contents...</p> 
       {console.log('visible is false but content is being executed!')} 
      </Modal> 
     ); 
    } 

Answer 2

这不是模态，它是关于这使得莫代尔成分，为什么父组件重新呈现时，执行console.log会始终执行。