當有多個組件需要共享狀態的時候，這就需要把狀態放到這些組件共有的父組件中，相應地，這些組件就變成了子組件，從而涉及到父子組件之間的通信。父組件通過props 給子組件傳遞數據，子組件則是通過調用父組件傳給它的函數給父組件傳遞數據。

　　很簡單的一個例子，我們在輸入框中輸入溫度，輸入框下面顯示冷和熱。這裏就有兩個組件，輸入框和它下面的顯示內容，且它們共享一個狀態，就是溫度。所以我們要把溫度這個狀態放到這兩個組件的父組件中。這裏就有三個組件，一個輸入框TemperatureInput, 一個是顯示內容TemperatureShow, 父組件TemperatureContainer. 由於 TemperatuerInput 和TemperatureShow 是無狀態的，可以用函數式聲明，接受父組件傳來的props. TempeartureContainer 是有狀態的，要用class 聲明。

　　TemperatureShow 組件非常簡單，就是條件渲染。根據父組件傳遞過來的溫度，渲染出不同的內容。

  　　// temperatureShow
      function TemperatureShow(props) {
        if(props.temperature >38) {
          return <p>天氣熱</p>
        }else if(props.temperature<=38 && props.temperature >=0){
          return <p>天氣正合適</p>
        }else
 
 {
          return <p>天氣冷</p>
        }
      }

　　TemperatureInput 則包含一個input輸入框，在react, 輸入框主要通過 value和 onChange 事件進行控制，狀態是自保持的。但是這裏我們把狀態放到父組件TempeartureContainer 中，輸入框是無狀態的，所以它的value值也只能從父組件中獲取，onChange 事件也只把用戶輸入的值傳遞給父組件，這裏就是父子之間相互通信。 這裏先簡單寫一個它的表現，onChange 稍後再說。

 //temperatureInput 
      function
 
 TemperatureInput(props) {
        return (
          <p>
            <label htmlFor="tempInput">請輸入天氣溫度</label>
            <input type="text" name="tempInput" value={props.temperature} onChange={} />
          </p>
        )
      }

　　還剩下TempeartureContainer 父組件，它是一個容器，把所有的組件包起來，當然，它還要定義狀態temperature,傳遞給子組件。

class TemperatureContainer extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            temperature: ‘‘
          };
        }

        render() {
          let temperature = this.state.temperature
          return (
            <div>
                <TemperatureInput temperature={temperature} />
                <TemperatureShow  temperature={parseFloat(temperature) } />
            </div>
          ) 
      }
    }

　　現在通過ReactDOM.render 把TempeartureContainer 渲染到頁面上。

ReactDOM.render(
        <TemperatureContainer />,
        document.getElementById(‘root‘)
);

　　最後我們要處理一下input 輸入框中的輸入問題，當我們進行輸入的時候，會觸發onChange事件，這時要改變temperature 的值，但是input自身是無法做到的，因為temperature存在於 父組件中，只能在父組件中改變。父組件中可以聲明一個函數，調用setState 函數來進行改變，在setState中我們要把新值賦值給temperature, 但是這個新值，也就是用戶輸入的值，卻存在於input 所在的組件中， 我們要把子組件中的數據傳給父組件。

React 組件基本使用(3) ---父子組件之間的通信