React中父組件對子組件的狀態變更

父組件中引入子組件button,通過ref將組件綁定到父組件上，如果是公用模塊，可以直接綁定最外層layout層。

<Button
      cb={() => {console.log('todo something')}}
      text='下一步'
      bgArray={['#CDCDCD', '#73B2E6', '#0677DA']}
      ref={(button) => {
          this.button = button;
      }}
></Button>

子組件中暴露外部調用方式，供外部來改變子組件狀態。代碼如下：

 

 只需要在父組件中調用

this.button.setBg(xx);

就能實現父組件傳達給子組件的狀態更改。