1.父组件对子组件传值 利用props属性传值
class Component extends React.Component {
constructor (props) {
super(props);
}
render() {
return (
<div>
<h1>I am {this.props.name}</h1>
</div>
);
}
}
ReactDOM.render(
<div>
<Component name='YUSIRXIAER'></Component>
<h1>hello world!!!</h1>
</div>,
document.getElementById('app')
);
2.子组件对父组件传值 简单来说就是利用回调来完成,比如下面例子,子组件来改变父组件的颜色
// 处理父子组件间传值
class Child extends React.Component {
constructor (props) {
super(props);
}
handleClick() {
this.props.colorChange('yellow')
}
render() {
return (
<div>
<h1>父组件的值 {this.props.bgColor}</h1>
<button onClick={(e) => this.handleClick(e)}>改变父组件颜色</button>
</div>
);
}
}
class Father extends React.Component {
constructor (props) {
super(props);
this.state={
bgColor: '#999'
};
}
onBgColorChange(color) {
this.setState({
bgColor: color
})
}
render() {
return (
<div style={{background:this.state.bgColor}}>
<Child bgColor={this.state.bgColor} colorChange={(color)=>{this.onBgColorChange(color)}}></Child>
{/* 子组件像父组件传值,设置回调 */}
</div>
);
}
}
ReactDOM.render(
<div>
<Father></Father>
</div>,
document.getElementById('app')
);
3.同一父组件下平级组件间传值 ,简单一句话 子组件先传给父组件,父组件再传给那个子组件
// 处理平级组件间传值 ,先传给父组件,父组件再传给另一个组件
class Child1 extends React.Component {
constructor (props) {
super(props);
}
handleClick() {
this.props.changeChild2Color('yellow')
}
render() {
return (
<div>
<h1>Child1: {this.props.bgColor}</h1>
<button onClick={(e) => this.handleClick(e)}>向Child2传值,改变其颜色</button>
</div>
);
}
}
class Child2 extends React.Component {
constructor (props) {
super(props);
}
render() {
return (
<div style={{background:this.props.bgColor}}>
<h1>Child2: {this.props.bgColor}</h1>
</div>
);
}
}
class Father extends React.Component {
constructor (props) {
super(props);
this.state={
child2BgColor: '#999'
};
}
onChild2BgColorChange(color) {
this.setState({
child2BgColor: color
})
}
render() {
return (
<div>
{/* 平级组件间传值*/}
<Child1 changeChild2Color={(color)=>{this.onChild2BgColorChange(color)}}></Child1>
<Child2 bgColor={this.state.child2BgColor}></Child2>
</div>
);
}
}
ReactDOM.render(
<div>
<Father></Father>
</div>,
document.getElementById('app')
);
最后想说一点,如果嵌套的父子组件很深好几层,这个时候我想你应该考虑用状态管理工具redux了
---------------------
作者:yusirxiaer
来源:CSDN
原文:https://blog.csdn.net/yusirxiaer/article/details/82924454
版权声明:本文为博主原创文章,转载请附上博文链接!