子组件之间的通信

比如要child1 给child2 传递数据，child1先把数据传递给父组件，再由父组件传递给child2

import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss'


class Child1 extends React.Component {
    constructor(props){
        super(props);
    }
    handleClick(){
        this.props.child2ColorChange('red')
    }
    render() {
        return <div>
            <p>父组件的背景颜色：{this.props.bgColor}</p>
            <button onClick={(e)=>this.handleClick(e)}>改变childs的颜色</button>
        </div>
    }
}
class Child2 extends React.Component {
    constructor(props){
        super(props);
    }

    render() {
        return <div style={{background:this.props.bgColor}}>
            <p>父组件的背景颜色：{this.props.bgColor}</p>
        </div>
    }
}


class Father extends React.Component {
    constructor(props){
        super(props);
        this.state={
            child2BgColor:'#999'
        }
    }
    childBgColorChange(color){
        this.setState({
            child2BgColor:color
        })
    }

    render() {
        return (<div>
            <Child1 child2ColorChange={(color)=>this. childBgColorChange(color)}/>
            <Child2 bgColor={this.state.child2BgColor}/>
        </div>)
    }
}


ReactDOM.render(
    <div>
        <Father/>
    </div>,
    document.getElementById('app')
);