提升 State （ Day12 ）

之前在 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