React-(五-2)組件進階：組件的父子溝通

父叫子做事

• 第 4 行，在父層組件中引入子組件，並且在第 27 行使用子組件
• 第 7 行，使用 createRef() 來創建一個ref，並且在第 27 行給子組件使用

• 第 20 行，點擊觸發第 12 行 addChild() 函式時，則去拿取該 ref 並觸發定義子組件中的 addCount()函式

  //Parent.js
  
  import React,{Component,createRef} from 'react';
  import Child from './Child'
  
  class Parent extends Component{
    childRef = createRef();
    state = {
      count:0
    }
    addChild = ()=>{
      this.childRef.current.addCount();
    }
    render(){
      return (
        <div>
          <h3>Parent:{this.state.count}</h3>
          <button onClick={this.addChild}>+Child +1</button>
  
          <Child ref={this.childRef}/>
        </div>
      )
    }
  }
  
  export default Parent;

• 第 10 行，子組件中的 addCount()函式會被觸發

  // Child.js
  
  import React,{Component} from 'react';
  
  class Child extends Component{
    state = {
      count:0
    }
  
    addCount = ()=>{
      this.setState({
        count:this.state.count + 1,
      })
    }
  }
  
  export default Child;

子叫父做事

• 第 11 行，先定義好動作，也就是從子層觸發父層去執行的函式

• 第 21 行，把函式當作一個 props 傳給子層。當子層觸發 addParent ，就會在父層執行 addCount

  // Parent.js
  
  import React,{Component} from 'react';
  import Child from './Child'
  
  class Parent extends Component{
    state = {
      count:0
    }
  
    addCount = () => {
      this.setState({
        count:this.state.count + 1,
      })
    }
    render(){
      return (
        <div>
          <h3>Parent:{this.state.count}</h3>
          
          <Child addParent={this.addCount}/>
        </div>
      )
    }
  }
  
  export default Parent;

• 第 14 行，用 props 綁定 addparent

  // Child.js
  
  import React,{Component} from 'react';
  
  class Child extends Component{
    state = {
      count:0
    }
  
    render(){
      return (
        <div>
          <h3>Child:{this.state.count}</h3>
          <button onClick={this.props.addParent}>Parent +1</button>
        </div>
      )
    }
  }
  
  export default Child;

父叫子做事(方法二)

父對子溝通，除了用 ref 溝通，另一種狀況是子層沒有自己的 state(剝奪子層的自主權)。

• 第 8 行，增加一個變數 childCount 作為子層的 count 資料

• 第 27 行，透過 props 傳入屬性跟方法給子層

  //Parents.js
  
  import Child from "./child";
  
  class parent extends Component{
      state = {
          count:"",
          childCount:""
      }
      addParent = () =>{
          this.setState({
              count:this.state.count + 1
          })
      }
      addChild = () => {
          this.setState({
              childCount:this.state.childCount + 1
          })
      }
      render(){
          return(
              <div>
                  <h3>Parent:{this.state.count}</h3>
              </div>
              <button onClick={this.adParent}>+Parent</button>
              <button onCLick={this.addChild}>+Child</button>
              <Child count={this.state.childCount} addParent={this.addParent} addChild={this.addChild}></Child>
          )
      }
  }

• 第 4 行，先解構上層傳來的 props，作為子層的屬性及方法

• 第 10, 11 行，就可以把解構出來的屬性或方法給子層顯示、使用

  // Child.js
  
  class Child extends Component{
      const {count,addParent,addChild} = this.props;
      
      render(){
          
          return(
              <div>
                  <h3>Child:{count}</h3>
                  <button onClick={adParent}>+Parent</button>
                  <button onCLick={addChild}>+Child</button>
              </div>
          )
      }
  }