鍍金池/ 教程/ HTML/ 組件間的通信
顯示數(shù)據(jù)
組件的引用
Controlled Input 值為 null 的情況
Reconciliation
子 props 的類型
組件的詳細說明和生命周期
傳遞 Props
特殊的非 DOM 屬性
組件 API
PureRenderMixin
雙向綁定輔助工具
瀏覽器中的工作原理
深入 JSX
表單組件
Dangerously Set innerHTML
入門
JSX 中的 If-Else
克隆組件
教程
更多的關(guān)于Refs
JSX 的 false 處理
高級性能
Mounting 后 componentWillReceiveProps 未被觸發(fā)
簡介
測試工具集
JSX 陷阱
工具集成（ToolingIntegration）
公開組件功能
通過 AJAX 加載初始數(shù)據(jù)
事件系統(tǒng)
可復用組件
this.props.children undefined
不可變數(shù)據(jù)的輔助工具（Immutability Helpers）
動態(tài)交互式用戶界面
組件的 DOM 事件監(jiān)聽
復合組件
動畫
插件
JSX 展開屬性
行內(nèi)樣式
性能分析工具
類名操作
與其他類庫并行使用 React
鍵控的片段
標簽和屬性支持
組件間的通信
React （虛擬）DOM 術(shù)語
JSX 根節(jié)點的最大數(shù)量
在樣式props中快速制定像素值
頂層 API
深入理解 React
自閉合標簽
為什么使用 React?
getInitialState 里的 Props 是一個反模式
與 DOM 的差異

組件間的通信

對于 父-子 通信，直接 pass props.

對于 子-父 通信： 例如： GroceryList 組件有一些通過數(shù)組生成的子節(jié)點。當這些節(jié)點被點擊的時候，你想要展示這個節(jié)點的名字：

var GroceryList = React.createClass({
  handleClick: function(i) {
    console.log('You clicked: ' + this.props.items[i]);
  },

  render: function() {
    return (
      <div>
        {this.props.items.map(function(item, i) {
          return (
            <div onClick={this.handleClick.bind(this, i)} key={i}>{item}</div>
          );
        }, this)}
      </div>
    );
  }
});

React.render(
  <GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNode
);

注意 bind(this, arg1, arg2, ...) 的使用： 我們通過它向 handleClick 傳遞參數(shù)。 這不是 React 的新概念，而是 JavaScript 的。

對于沒有 父-子 關(guān)系的組件間的通信，你可以設(shè)置你自己的全局時間系統(tǒng)。 在 componentDidMount() 里訂閱事件，在 componentWillUnmount() 里退訂，然后在事件回調(diào)里調(diào)用 setState()。