深入了解React（十、兄弟组件间通信）

深入了解React（十、兄弟组件间通信）

本质就是先把一个子组件数据传输到父组件，然后通过父组件传输到另外一个子组件，这样就实现了兄弟间组件的通信

import React from 'react';
import ReactDOM from 'react-dom';import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import './index.scss';class Child_1 extends React.Component {constructor(props) {super(props);}handleClick() {this.props.changeChild_2Color('blue');}render() {return (<div><h1>Child_1：{this.props.bgColor}</h1><p><button onClick={(e) => {this.handleClick(e)}}>改变Child_2背景色bgColor</button></p></div>);}
}class Child_2 extends React.Component {constructor(props) {super(props);}render() {return (<div style={{backgroundColor: this.props.bgColor}}><h1>child_2背景色：{this.props.bgColor}</h1></div>);}
}class Father extends React.Component {constructor(props) {console.log('constructor---props：', props);super(props);this.state = {child_2BgColor: '#999'};console.log('constructor---props：', props);}onChild_2BgColorChange(color) {this.setState({child_2BgColor: color});}render(props) {console.log('render---props：', props);return (<div><Child_1 changeChild_2Color={(color) => {Child_2BgColorChange(color)}}/><Child_2 bgColor={this.state.child_2BgColor}/></div>)}
}class App extends React.Component {render() {return (<div className=""><Father><p><span>App Span</span></p><p><a href="">link</a></p></Father><hr/></div>);}
}der(<div>{/*<Component></Component>*/}<App></App></div>,ElementById('app')
);