您的位置：首页 > Web前端 > React

React教程（四）——组件传值和通信

2018-03-14 17:16 477 查看
组件传值，是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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航