React 組件的傳值

React組件拆分與組間之間的傳值

React 是一個基於組件化開發的前端框架，那什麼是組件化的概念呢，以下圖來做比喻的話

圖中的每一個區塊都可以拆分成一個一個的組件，像是上面的Header，下面內容的每一個區塊，都會是一個組件。為什麼我們需要拆分組件呢，在開發前端頁面的時候，這個頁面的邏輯可能相對來得相當複雜，如果還是採用原有的開發方式，那就會造成我們在寫代碼之中的困擾。而當我們將頁面拆分成一塊一塊的組件之後，相對來說，每個組件的邏輯就會比整個頁面上來的簡單。

父子組件傳遞

所以當我們在React開發之中，我們會發現，我們的頁面結構會像上面的圖示一樣，會有一個最頂層的組件，下面會有很多子組件，當開發複雜頁面的時候，子組件可能又有他的子組件，就會有更多的層次，所以在我們進行開發的時候，我們的頁面就會變成上面的樹狀結構。

我們在開發的過程中，也會很常遇到我們必須要做組件之間的值傳遞，當不使用其他框架的同時，那我們要怎麼在組件之中傳遞他們的數值呢？其實我們在父子組件之間的傳遞可以使用下面的方法，當你是父組件要傳遞給子組件的時候，使用prpos，參考下列程式碼。

class Child extends Component {
  //當父組件的Render函數被運行時，他的子組件的Redner都會被重新執行
  render() {
    return <div>{this.props.content}</div>;
  }
}

class Parent extends Component {
  render() {
    return <Child content={"測試"}/>
  }
}

而子組件要傳遞給父組件，就可以使用callback的方式，父組件把底下的function當成callback傳遞進子組件，讓子組件呼叫。如下面代碼範例所表示。

class Child extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  render() {
    return <div onClick=this.hanldeClick>{this.props.content}</div>;
  }
    
  handleClick() {
     //對應的callback
    this.props.callback()
  }
}

class Parent extends Component {
  render() {
    return 
		<Child 
      		content={"測試"}
      		callback={this.handleCallBack}
		/>
  }
    
  handleCallBack() {

  }
}