react开发教程之React 组件之间的通信方式

//HeaderBar.jsx 子组件import React, { Component } from 'react';class Header extends Component {  constructor() {    super();    this.handleClick = (e) => {      console.log(this)    }  }  renderLeftComponent() {    let leftDOM = {};    if (this.props.renderLeftComponent) {      return this.props.renderLeftComponent();    }    if (this.props.showBack) {      let backFunc = this.props.onBack || this.goBack;      leftDOM = (<a onClick={backFunc.bind(this)}><i className="icon left-icon icon-left-arrow"></i></a>);    }    return leftDOM;  }    renderRightComponent() {    if (this.props.renderRightComponent) {      return this.props.renderRightComponent();    }  }  goBack() {    alert("返回上一页")  }  render() {    return (      <header className="header-bar">        {this.renderLeftComponent()}        <span>{this.props.title || '滴滴'}</span>        {this.renderRightComponent()}      </header>    );  }}export default Header;//父亲组件部分代码App.jsximport HeaderBar from "./components/Header";let leftIcon = function () { return (  <a><i className="icon left-icon icon-left-haha"></i>左边按钮</a> )}class App extends Component { render() {  return (   <div className="App">    <HeaderBar title="滴滴打车" renderLeftComponent={leftIcon} />   </div>  ); }}

// Component 父级class parentComponent extends React.Component {    // add the following property  static childContextTypes = {    color: React.PropTypes.string  }    // 添加下面方法  getChildContext() {    return {      color: "#f00"    }  }    render() {    <div>      <Child1 />    </div>  }}// Component Child1class Child1 extends React.Component {  // 添加下面属性  static contextTypes = {    color: React.PropTypes.string  }    render() {    <div>{this.context.color}</div>  }}