原著序

處理 React 元件之間的交流方式，主要取決於元件之間的關係，然而這些關係的約定人就是你。

我不會講太多關於 data-stores、data-adapters 或者 data-helpers 之類的話題。我下面只專注於 React 元件本身的交流方式的講解。

React 元件之間交流的方式，可以分為以下 3 種：

• 【父元件】向【子元件】傳值；
• 【子元件】向【父元件】傳值；
• 沒有任何巢狀關係的元件之間傳值（PS：比如：兄弟元件之間傳值）

一、【父元件】向【子元件】傳值

初步使用

這個是相當容易的，在使用 React 開發的過程中經常會使用到，主要是利用 props 來進行交流。例子如下：

// 父元件
var MyContainer = React.createClass({
  getInitialState: function () {
    return {
      checked: true
    };
  },
  render: function() {
    return (
      <ToggleButton text="Toggle me" checked={this.state.checked} />
    );
  }
});

// 子元件
var ToggleButton = React.createClass({
  render: function () {
    // 從【父元件】獲取的值
 

    var checked = this.props.checked,
        text = this.props.text;

    return (
        <label>{text}: <input type="checkbox" checked={checked} /></label>
    );
  }
});

進一步討論

如果元件巢狀層次太深，那麼從外到內元件的交流成本就變得很高，通過 props 傳遞值的優勢就不那麼明顯了。（PS：所以我建議儘可能的減少元件的層次，就像寫 HTML 一樣，簡單清晰的結構更惹人愛）

// 父元件
var MyContainer = React.createClass({
  render: function(){
    return (
      <Intermediate text="where is my son?" />
    );
  }
});

// 子元件1：中間巢狀的元件
var Intermediate = React.createClass({
  render: function(){
    return (
      <Child text={this.props.text} />
    );
  }
});

// 子元件2：子元件1的子元件
var Child = React.createClass({
  render: function(){
    return (
      <span>{this.props.text}</span>
    );
  }
});

二、【子元件】向【父元件】傳值

接下來，我們介紹【子元件】控制自己的 state 然後告訴【父元件】的點選狀態，然後在【父元件】中展示出來。因此，我們新增一個 change 事件來做互動。

// 父元件
var MyContainer = React.createClass({
  getInitialState: function () {
    return {
      checked: false
    };
  },
  onChildChanged: function (newState) {
    this.setState({
      checked: newState
    });
  },
  render: function() {
    var isChecked = this.state.checked ? 'yes' : 'no';
    return (
      <div>
        <div>Are you checked: {isChecked}</div>
        <ToggleButton text="Toggle me"
          initialChecked={this.state.checked}
          callbackParent={this.onChildChanged}
          />
      </div>
    );
  }
});

// 子元件
var ToggleButton = React.createClass({
  getInitialState: function () {
    return {
      checked: this.props.initialChecked
    };
  },
  onTextChange: function () {
    var newState = !this.state.checked;
    this.setState({
      checked: newState
    });
    // 這裡要注意：setState 是一個非同步方法，所以需要操作快取的當前值
    this.props.callbackParent(newState);
  },
  render: function () {
    // 從【父元件】獲取的值
    var text = this.props.text;
    // 元件自身的狀態資料
    var checked = this.state.checked;

    return (
        <label>{text}: <input type="checkbox" checked={checked}                 onChange={this.onTextChange} /></label>
    );
  }
});