react---父组件向子组件传值以及组件复用
程序员文章站
2022-05-26 11:12:32
...
<!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>