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.jsx
import 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 Child1
class Child1 extends React.Component {
 // 添加下面屬性
 static contextTypes = {
 color: React.PropTypes.string
 }
 
 render() {
 <div>{this.context.color}</div>
 }
}