React教程（四）——组件传值和通信
组件传值，是react中的重点知识，当然对于初学者，也是难以理解的重点知识。
React有两个特殊概念——props、state。
state用于界面状态管理。
props用于组件传值。它的使用分为两种，一种是父传子，另一种是子传父！
父传子
父元素传递给子元素，只需要在父元素的对应组件上写上props。然后在子元素直接读取到props。
父元素：
<Com title="我是从父元素上传递的值" />子元素：
render(){
return (
<div>{this.props.title}</div>
)
}完整示例如下：
var Child = React.createClass({
render(){
return (
<div>{this.props.title}</div>
)
}
});
var Parrent = React.createClass({
render(){
return (
<div>
<h1>react</h1>
<Child title="我是父元素传递的值" />
</div>
)
}
})
ReactDOM.render(<Parrent />,document.getElementById("root"));子传父
子组件向父组件传值，传递的方式还是props。
不同的地方在于，父元素向子元素传递下去的是一个方法。然后这个方法在子组件中，被执行！
通过什么样的方式来执行这个方法？当然是事件！！！
父元素中可能是这样的：
//js
parrent: function(value){
alert(value)
}
//dom
<div>
<Child parrent={(value) => this.parrentEvent(value)} />
</div>在子元素中：第一个时间来触发它。
//js
clickEvent: function(){
this.props.parrent("子元素的数据");
}
//dom
<div onClick={()=>this.clickEvent()}>点击发送给父元素</div>如果需要一个完整的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
var Child = React.createClass({
clickEvent: function (data) {
this.props.parrent(data)
},
render(){
return (
<div>
<p>{this.props.title}</p>
<button onClick={()=>this.clickEvent(1234)}>发送数据</button>
</div>
)
}
});
var Parrent = React.createClass({
parrentEvent: function (data) {
alert(data);
},
render(){
return (
<div>
<h1>react</h1>
<Child parrent={(data)=>this.parrentEvent(data)} title="我是父元素传递的值" />
</div>
)
}
})
ReactDOM.render(<Parrent />,document.getElementById("root"));
</script>
</body>
</html>声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： InputStream.available()获取流大小问题
- 下一篇： ios常用数组的解析
