5、Reactjs中组件之间的通信

最新推荐文章于 2022-01-11 23:07:02 发布

yubo_725

最新推荐文章于 2022-01-11 23:07:02 发布

阅读量3.8k

点赞数 2

分类专栏： React js 文章标签： reactjs javascript

本文链接：https://blog.csdn.net/yubo_725/article/details/50537023

版权

React js 专栏收录该内容

9 篇文章 3 订阅

订阅专栏

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>