之前在 State 和生命週期 在每一個元件裡面都會有自己的 state，但如果遇到彼此需要共用的 state 就會把資料放在父層，並從父層傳遞 props 資料跟控制 function 去修改資料給子元件。

結構示意圖

提升 State 小練習

之前主管分享了一個使用其他框架，元件可以互相傳遞資料的小練習。看到提升 State 這部分，覺得很適合用 React 改寫試試。
主要是能複用元件，但點擊元件會傳遞資料給另一個元件的動作。

1. 在父層元件寫入共用資料
2. 使用 props 將「function」傳遞進去進行修改父元件的資料

以下結果：

class Calling extends React.Component {
  constructor(props) {
    super(props);
    this.handleCalling = this.handleCalling.bind(this);
  }

  handleCalling(e) {
    const callingTo = this.props.role  === 'brother' ? 'sister' : 'brother'
    this.props.calling(callingTo)
  }

  render() {
    return (
      <div className="comp">
        <p>Hello, I'm { this.props.role }.</p>
        <button onClick={this.handleCalling} >
            Message To { ( this.props.role === 'brother') ? 'Sister' : 'Brother' }
        </button>
            {  this.props.isMomCalling ? <p className="mom">Mom said do your homework!</p> : '' }
      </div>
    );
  }
}

class Room extends React.Component {
  constructor(){
    super();
    this.state = {
      sister: {
        isMomCalling: false
      },
      brother: {
        isMomCalling: false
      }
    }
    this.calling = this.calling.bind(this)
  }
  
  calling = (who) => {
   this.setState({
     [who]: {
       isMomCalling: true
     }
   })
  }
  
  render() {
    return (
      <div id="app">
        <Calling isMomCalling={this.state.brother.isMomCalling} calling={this.calling} role="brother" />
        <Calling isMomCalling={this.state.sister.isMomCalling} calling={this.calling} role="sister" />
      </div>
    );
  }
}

ReactDOM.render(
  <Room />,
  document.getElementById('root')
);

Codepen 連結

參考資料：
https://zh-hant.reactjs.org/docs/lifting-state-up.html
https://stackblitz.com/edit/vue-uzoild?file=src/App.vue