深入了解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) => {
                    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')
);