前文讲到，React是面向组件来开发的，那么组件之间是怎样配合的呢？
父组件传参子组件：
下面我定义了两个组件，上层组件为Component，子组件为SubComponent。父组件调用子组件的时候，通过props属性传递了两个参数，分别为：times以及clickEvent
<div>
<p>=========将父组件中的state值与函数传递给子组件========</p>
<SubComponent times={times} clickEvent={this.clickBtn.bind(this)}/>
<p>=================================================</p>
</div>
子组件接收参数并使用：
父组件变量的接收使用：
//从props中取值 const times = this.props.times;
父组件函数的使用：
//实际上调用的是传参进来的函数 this.props.clickEvent();
DEMO：
仍旧是复制代码看效果：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
</head>
<body>
<!--react基础库-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<!--bable转换库，ES语法以及Jax语法的转换-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<div id="content"></div>
<script type="text/babel">
//定义父组件
class Component extends React.Component{
//构造函数，在初始化组件的时候会执行
constructor(props){
super(props);
this.state={
times: 1
}
}
//render会进行页面的渲染，当state中数据更新或者发送ajax等事件被监听到都会触发render的刷新
render(){
//从state中取值
const times = this.state.times;
// 绑定onClick事件函数
return(
<div>
<p>=========将父组件中的state值与函数传递给子组件========</p>
<SubComponent times={times} clickEvent={this.clickBtn.bind(this)}/>
<p>=================================================</p>
</div>
);
};
clickBtn(){
//console.log("click")
let times=this.state.times;
times+=1;
this.setState({times});
}
}
//定义子组件
class SubComponent extends React.Component{
//构造函数，仅在初始化组件的时候会执行一次
constructor(props){
super(props);
this.state={times: this.props.times}
}
render(){
//从props中取值
const times = this.props.times;
// 绑定onClick事件函数
return(
<div>
<p>次数:{times}</p>
<button onClick={this.clickSubBtn.bind(this)} >Click</button>
</div>
);
}
clickSubBtn(){
//实际上调用的是传参进来的函数
this.props.clickEvent();
}
}
ReactDOM.render(<Component />,document.getElementById("content"));
</script>
</body>
</html>
DEMO的结果是：统计点击次数。
注意事项：
1、React只支持从上往下的参数传递。
2、不要建立太过复杂的上下结构，一般建议2-3层。