摘要：
指定数据并希望传递数据的父组件应该定义childContextTypes和getChildContext（）；想要接收数据的子组件必须定义contextType以使用传递的上下文。
关于react的几个网站：
小书：http://huziketang.mangojuice.top/books/react/
组件传值的方法：
一、父子组件间的传值（主要是利用 props 来进行交流，父组件用this.state传值，子组件用this.prop）：
如果组件嵌套层次太深，那么从外到内组件的交流成本就变得很高，通过 props 传递值的优势就不那么明显了。
Father.jsx文件
importReact, {Component} from'react'
importSonfrom'./Son.jsx'
{/*引入子组件*/}exportdefaultclassFatherextendsComponent{
constructor(){
super();
this.state = {
message:'hello',
sonVal:null
}
}
render(){
return (
<divid="father">
<h1>Father组件</h1>
<buttononClick={()=>{this.setState({message:'world'})}}>
修改
</button>
{/* <Son data="test data value"/> */}
<p>选择了那种水果：{this.state.sonVal}</p>
<Sondata={this.state.message}handle={this.testAction.bind(this)}/>
{/*子组件中传递参数或者方法*/}
</div>
)
}
// 接收子组件数据
testAction(value){
console.log(this);
console.log(value);
this.setState({sonVal:value});
} }
Son.jsx
importReact, {Component} from'react'
exportdefaultclassSonextendsComponent{
constructor(){
super();
this.state = {
select:'苹果'
}
}
render(){
letarr = ['苹果', '香蕉', '西瓜'];
return (
<divid="son">
<h1>Son组件</h1>
<p>接收到的值为：{this.props.data}</p>
{
arr.map((item, index)=>{
return (
<pkey={index}>
{item}:
<inputtype="radio"value={item}
checked={this.state.select == item}
onChange={this.inputChange.bind(this)}/>
</p>
)
})
}
</div>
)
}
inputChange(ev){
letvalue = ev.target.value;
this.setState({select:value});
// 调用父组件的方法，将值传递给父组件
this.props.handle(value);
}
}
二.（父组件）向更深层的（子组件） 进行传递信息 >>利用（context）
通过添加 childContextTypes 和 getChildContext() 到 第一层组件MessageList （ context 的提供者），React 自动向下传递数据然后在组件中的任意组件（也就是说任意子组件，在此示例代码中也就是 Button ）都能通过定义 contextTypes（必须指定context的数据类型） 访问 context 中的数据。这样就不需要通过第二层组件进行传递了。
指定数据并要将数据传递下去的父组件要定义 childContextTypes 和 getChildContext() ；想要接收到数据的子组件 必须定义 contextTypes 来使用传递过来的 context 。
varButton = React.createClass({
// 必须指定context的数据类型
contextTypes: {
color:React.PropTypes.string
},
render:function() {
return (
<buttonstyle={{background:this.context.color}}>
{this.props.children}
</button>
);
}
});
varMessage = React.createClass({
render:function() {
return (
<div>
{this.props.text}<Button>Delete</Button>
</div>
);
}
});
varMessageList = React.createClass({
//父组件要定义 childContextTypes 和 getChildContext()
childContextTypes: {
color:React.PropTypes.string
},
getChildContext:function() {
return {color:"purple"};
},
render:function() {
varchildren = this.props.messages.map(function(message) {
return<Messagetext={message.text}/>;
});
return<div>{children}</div>;
}
});
三、子组件向父组件传值
【子组件】控制自己的 state 然后告诉【父组件】的点击状态，然后在【父组件】中展示出来
// 父组件
varMyContainer = React.createClass({
getInitialState:function () {
return {
checked:false
};
},
onChildChanged:function (newState) {
this.setState({
checked:newState
});
},
render:function() {
varisChecked = this.state.checked ? 'yes' : 'no';
return (
<div>
<div>Are you checked: {isChecked}</div>
<ToggleButtontext="Toggle me"
initialChecked={this.state.checked}
callbackParent={this.onChildChanged}
/>
</div>
);
}
});
// 子组件
varToggleButton = React.createClass({
getInitialState:function () {
return {
checked:this.props.initialChecked
};
},
onTextChange:function () {
varnewState = !this.state.checked;
this.setState({
checked:newState
});
// 这里要注意：setState 是一个异步方法，所以需要操作缓存的当前值
this.props.callbackParent(newState);
},
render:function () {
// 从【父组件】获取的值
vartext = this.props.text;
// 组件自身的状态数据
varchecked = this.state.checked;
return (
<label>{text}: <inputtype="checkbox"checked={checked}onChange={this.onTextChange}/></label>
);
}
});
四、没有任何嵌套关系的组件之间传值（比如：兄弟组件之间传值）
推荐一个相关博客：https://blog.csdn.net/u011439689/article/details/51955991
ProductSelection和Product本身是没有嵌套关系的，而是兄弟层级的关系。但通过在ProductSelection组件中订阅一个消息，在Product组件中又发布了这个消息，使得两个组件又产生了联系，进行传递的信息。所以根据我个人的理解，当两个组件没有嵌套关系的时候，也要通过全局的一些事件等，让他们联系到一起，进而达到传递信息的目的。
One.jsx文件
importReact, {Component} from'react'
importPubSubfrom'pubsub-js'
exportdefaultclassOneextendsComponent{
constructor(){
super();
console.log('constructor');
this.state = {
message:null
}
}
render(){
console.log('render');
return (
<div>
<h1>One组件</h1>
<p>接收到的值为：{this.state.message}</p>
</div>
)
}
// 创建并且渲染完成的方法
componentDidMount(){
console.log('componentDidMount');
//监听子组件的事件
this.token = PubSub.subscribe('send-data', (eventName, data)=>{
console.log('subscribe执行了');
console.log(data);
this.setState({message:data});
})
// $on
}
//组件将要销毁
componentWillUnmount(){
console.log('componentWillUnmount');
// 组件销毁时，需要移除监听
PubSub.unsubscribe(this.token);
// $off
}
}
Two.jxs
importReact, {Component} from'react'
importPubSubfrom'pubsub-js'
exportdefaultclassTwoextendsComponent{
render(){
return (
<div>
<h1>Two组件</h1>
<inputtype="text"ref="in"/>
<buttononClick={this.sendAction.bind(this)}>发送</button>
</div>
)
}
sendAction(){
// 发送信息给one组件
PubSub.publish('send-data', this.refs.in.value);
// $emit
}
}
五.利用react-redux进行组件之间的状态信息共享
如果是比较大型的项目，可以使用react-redux，这方面的资料可以参考阮一峰的网络日志。
http://github.com/mroderick/PubSubJS