欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

深入了解React(九、父子组件间通信)

程序员文章站 2024-02-26 22:37:10
...
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')
);