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會始終執行。