简单教你React父子组件间平级组件间传值

国庆充电特辑：

堵车堵死，废话不多说直接上菜。

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')
);

看效果