5、Reactjs中组件之间的通信
React中最重要的就是组件了，组件之间可以嵌套使用，那么，父组件和子组件之间，如何进行通信呢？
下面用一个例子记录React中组件之间的通信，因为组件中包含有属性和状态两个对象，所以组件间的通信，主要通过这两个对象来完成。
父组件给子组件通信，可以直接使用props，让父组件传递给子组件一个属性，子组件拿到这个属性即可；
子组件给父组件通信，也需要用到props，不过这个就有点类似于回调函数了，即父组件传给子组件一个函数，这个函数存在于父组件中，子组件通过回调这个函数，来让父组件做相应的操作，下面是一个父子组件互相通信的Demo，在浏览器中运行的效果如下图：
在父组件的输入框中输入内容后，该内容会同步显示到子组件中，或者在子组件的输入框中输入内容，该内容会同步显示到父组件中，如下图所示：
下面贴上这个Demo的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件的嵌套和通信</title>
<!-- 引入React需要用到的js文件 -->
<script type="text/javascript" src="../react-0.13.0/build/react.js"></script>
<script type="text/javascript" src="../react-0.13.0/build/JSXTransformer.js"></script>
<!-- 这里是组件用到的css样式 -->
<style type="text/css">
.parentComponent {
width: 400px;
height: 500px;
border-style: solid;
border-width: 1px;
background-color: #6699ff;
}
.childComponent {
width: 350px;
height: 300px;
margin-left: 25px;
border-style: solid;
border-width: 1px;
background-color: #00aaaa;
}
.title {
padding: 10px 0px 10px 0px
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
//定义父组件
var ParentComponent = React.createClass({
getInitialState: function() {
return {
parentInput: '', //父组件的输入框中的内容
childInput: '', //子组件的输入框中的内容
onChange: this.handleChange //传给子组件，用于监听子组件输入框内容改变的函数
};
},
//处理父组件和子组件的输入框内容改变的事件，isParent用于区分是父组件还是子组件
handleChange: function(isParent, event) {
if(isParent) {
//是父组件输入框内容发生变化，则修改state，让子组件的输入框跟着改变，注意state的改变，会导致组件重新渲染
this.setState({parentInput: event.target.value});
}else{
//是子组件输入框，则修改state，让父组件的输入框跟着改变
this.setState({childInput: event.target.value});
}
},
render: function() {
return (
<div className="parentComponent">
<div className="title" style={{width: '400px', backgroundColor: '#ececec'}}>我是父组件</div>
<br/>
<input type="text" onChange={this.handleChange.bind(this, true)} style={{width: '350px', height: '30px', marginLeft: '25px'}} placeholder="在这里输入的文本，将显示到子组件中"/>
<br/><br/>
<input type="text" disabled="disabled" value={this.state.childInput} style={{width: '350px', height: '30px', marginLeft: '25px'}} placeholder="子组件中输入的文本，将显示在这里"/>
<br/><br/>
<ChildComponent data={this.state}/>
</div>
);
}
});
//定义子组件
var ChildComponent = React.createClass({
render: function() {
return (
<div className="childComponent">
<div className="title" style={{width: '350px', backgroundColor: '#ececec'}}>我是子组件</div>
<br/>
<input type="text" disabled="disabled" style={{width: '300px', height: '30px', marginLeft: '25px'}} placeholder="父组件中输入的内容，将显示在这里" value={this.props.data.parentInput}/>
<br/><br/>
<input type="text" onChange={this.props.data.onChange.bind(this, false)} style={{width: '300px', height: '30px', marginLeft: '25px'}} placeholder="在这里输入的文本，将显示到父组件中"/>
<br/><br/>
</div>
);
}
});
React.render(<ParentComponent />,
document.getElementById('container'));
</script>
</body>
</html>