深入了解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 extends React.Component {
    constructor(props) {
        super(props);
    }

    handleClick() {
        this.props.changeColor('blue');
    }

    render() {
        return (
            <div>
                <h1>父组件的背景色：{this.props.bgColor}</h1>
                <p>
                    <button onClick={(e) => {
                        this.handleClick(e)
                    }}>改变父组件背景色bgColor
                    </button>
                </p>
            </div>
        );
    }
}

class Father extends React.Component {
    constructor(props) {
        console.log('constructor---props：', props);
        super(props);
        this.state = {
            bgColor: '#999'
        };
        console.log('constructor---props：', props);
    }

    onBgColorChange() {
        this.setState({
            bgColor: 'blue'
        });
    }

    render(props) {
        console.log('render---props：', props);
        return (
            <div style={{background: this.state.bgColor}}>
                <Child bgColor={this.state.bgColor} changeColor={(color) => {
                    this.onBgColorChange(color)
                }}/>
            </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')
);