react---父组件向子组件传值以及组件复用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>react--父子组件通信</title>
	<script src='react.js'></script>
	<script src='react-dom.js'></script>
	<script src='babel.min.js'></script>
</head>
<body>
	<div id='example'></div>
	<script type='text/babel'>
		/*父子组件嵌套*/
		class Child extends React.Component{
			constructor(){
				super();
				/*不同步改变的方法,设置子组件自己的状态去存储父组件传过来的值,并且在组件挂载前赋值给子组件*/
				this.state = {
					cmsg:''
				}
			}
			/*调用生命周期函数进行给子组件赋值*/
			componentWillMount(){
				this.setState({
					cmsg:this.props.childmsg
				});
			}
			render(){
				return (
					/*通过组件属性进行传值*/
					/*<div style={{color:this.props.rgb,fontSize:'30px'}}>我是子组件</div>*/
					/*当子组件通过props直接绑定时,父子组件的值同步变化,因为state改变,会重新渲染组件*/
					/*<div>显示内容:{this.props.childmsg}</div>*/
					/*通过子组件自己的状态进行获取父组件的值*/
					<div>
						{/*此时当父组件的数据改变时this.state.cmsg的值不变,而this.props.childmsg的值随父组件的值而改变*/}
						<div>显示内容:{this.state.cmsg}</div>
						<div>{this.props.childmsg}</div>
					</div>
				)
			}
		}
		class Parent extends React.Component{
			constructor(){
				super();
				/*父组件向子组件传值,通过state*/
				this.state = {
					msg:'我是父组件的数据'
				}
			}
			change(){
				this.setState({
					msg:'父组件的值改变了'
				});
			}
			render(){
				return (
					<div>
						{/*组件复用,随机改变子组件的颜色*/}
						{/*<Child rgb={'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')'}/>
						<Child rgb={'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')'}/>
						<Child rgb={'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')'}/>
						<Child rgb={'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')'}/>*/}
						<Child childmsg={this.state.msg}/>
						<div>父组件数据:{this.state.msg}</div>
						<div>
							<input type="button" value='change' onClick={this.change.bind(this)}/>
						</div>
					</div>
				)
			}
		}
		ReactDOM.render(
				/*text,*/
				<Parent />,
				document.getElementById('example')
			)
	</script>
</body>
</html>

展开阅读全文

没有更多推荐了,返回首页