深入了解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 (
            

                
Child_1：{this.props.bgColor}
                

                     {
                        this.handleClick(e)
                    }}>改变Child_2背景色bgColor
                    
                
            
        );
    }
}

class Child_2 extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            

                
child_2背景色：{this.props.bgColor}
            
        );
    }
}

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 (
            

                 {
                    this.onChild_2BgColorChange(color)
                }}/>
                
            
        )
    }
}

class App extends React.Component {
    render() {
        return (
            

                
                    
App Span
                    
link
                
                

            
        );
    }
}

ReactDOM.render(
    

        {/**/}
        
    
,
    document.getElementById('app')
);