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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_40735186/article/details/80599587
<!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>

猜你喜欢

转载自blog.csdn.net/qq_40735186/article/details/80599587