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);
        this.handleClick=this.handleClick.bind(this);
    }

    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);
        this.onChild_2BgColorChange=this.onChild_2BgColorChange.bind(this);

    }

    onChild_2BgColorChange(color) {
        this.setState({
            child_2BgColor: color
        });
    }

    render(props) {
        console.log('render---props：', props);
        return (
            <div>
                <Child_1 changeChild_2Color={(color) => {
                    this.onChild_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>
        );
    }
}

ReactDOM.render(
    <div>
        {/*<Component></Component>*/}
        <App></App>
    </div>,
    document.getElementById('app')
);

原理：兄弟通信的基础是建立在父子通信上，首先child2将信息传递给father组件（通过触发父组件传递给子组件的props回调函数onChild_2BgColorChange），father组件的onChild_2BgColorChange函数改变自身的state的某个状态，且这个状态以props的形式传递给了child2.