传统的父子组件传值 ： 这样要一层一层往下传，会带来诸多不便

import React from 'react';
import ReactDOM from 'react-dom';//一般的父子组件传值 会是从上往下一个套一个都带上参数
//比如改变颜色，比如渲染messages
//这样子真的很麻烦，所以用context来改变这样的传值方式，用'prop-type'
class Container extends React.Component{render(){return(<MessageList messages={this.props.messages} color={color}/>)}
}
class MessageList extends React.Component{render(){return(<ul>{this.props.messages.map((message,index)=><Message color={color} key={index} message={message}/>)}</ul>)}
}
class Message extends React.Component{render(){return(<li style={{color:this.props.color}}>{this.props.message}</li>)}
}let messages = [1,2,3];
let color = 'blue';
ReactDOM.render(<Container messages={messages} color={color}></Container>,document.querySelector('#root'));复制代码

使用props-type
context直接在父组件定义，子组件随用随调

import React from 'react';
import ReactDOM from 'react-dom';
import {PropTypes} from 'prop-types';//getChildContext
//childContextTypes
//Props.String
//用这个不稳定，因为可能会被覆盖？可能你不知道在哪传来的？class Container extends React.Component{getChildContext(){//返回context对象，并指定返回对象类型//使用了这个以后，所有的Container的子组件都会有这样的一个context对象return {color:'red'};}render(){return(<MessageList messages={this.props.messages}/>)}
}
//
Container.childContextTypes = {color:PropTypes.string
}
class MessageList extends React.Component{render(){return(<ul>{this.props.messages.map((message,index)=><Message message={message}/>)}</ul>)}
}
class Message extends React.Component{render(){return(<li style={{color:this.context.color}}>{this.props.message}</li>)}
}
Message.childContextTypes = {color:PropTypes.string
}let messages = [1,2,3];
let color = 'blue';
ReactDOM.render(<Container messages={messages} color={color}></Container>,document.querySelector('#root'));复制代码