React父子组件之间的通信——经典案例

最新推荐文章于 2024-09-05 22:43:38 发布

@年年有鱼

最新推荐文章于 2024-09-05 22:43:38 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： react 组件化通信 jQuery

本文链接：https://blog.csdn.net/qq_40735186/article/details/80599587

版权

前端专栏收录该内容

40 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="js/react.development.js"></script>
	<script src="js/react-dom.development.js"></script>
	<script src="js/browser.js"></script>
	<script src="js/jquery.js"></script>
	<script type="text/babel">
	class Child extends React.Component{
		constructor (...args){
			super(...args);
			this.num = 55;
		}
		render(){
			this.props.cc(this.num);//回调函数
			return <div>
				{this.props.a}
			</div>;
		}
	}
	class Parent extends React.Component{
		constructor (...args){
			super(...args);
			this.a = 12;
		}
		fn(num){
			alert(num);
		}
		render(){
			return <div>
				<div>aaaaaaa</div>
				<Child a={this.a} cc={this.fn.bind(this)}/>
				<div>bbbbbbb</div>
			</div>;
		}
	}
	$(function(){
		ReactDOM.render(
			<Parent/>,
			$('#view')
		);
	});
	</script>
</head>
<body>
	<view id="view"></view>
</body>
</html>