react组件间通信(重点)

安装：npm install events --save
引入：import { EventEmitter } from "events";
     export default new EventEmitter(); // 初始化实例并输出给其他组件使用

export default class App extends Component{
    render(){
        return(
            <div>
                //这里定义了两个毫无关联的组件，Boo组件向Foo组件传值
                <Foo />
                <Boo />
            </div>
        );
    }
}


export default class Foo extends Component{
    constructor(props) {
        super(props);
        this.state = {
            msg:null,
        };
    }
    componentDidMount(){
        // 声明一个自定义事件,接受到msg的参数进行渲染。
        this.eventEmitter = emitter.on("callMe",(msg)=>{
            this.setState({
                msg,
            })
        });
    }
    // 组件销毁前移除事件监听
    componentWillUnmount(){
        emitter.removeListener(this.eventEmitter);
    }
    render(){
        return(
            <div>
                { this.state.msg }
                我是非嵌套 1 号
            </div>
        );
    }
}


export default class Boo extends Component{
    render(){
        const cb = (msg) => {
            return () => {
                // 触发自定义事件。参一为事件名，后面为传递给事件的参数，可多个。
                emitter.emit("callMe","Hello")
            }
        }
        return(
            <div>
                我是非嵌套 2 号
                <button onClick = { cb("blue") }>点击我</button>
            </div>
        );
    }
}

class Child extends Component{
    render(){
        //这边子组件通过this.props接受到值
        const { name } = this.props;
        return <p>hello, { name }</p>;
    }
}

class Parent extends Component{
    render(){
        return (
            <div>
                <Child name='Bob' />
            </div>
        );
    }
}

class Parent extends Component{
    constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.state={
            visible: false。
        }
    }

    handleClick(){
        this.setState({
            visible: true,
        });
    }

    render(){
        return (
            <React.Fragment>
                <div style={{display: this.state.visible ? 'block' : 'none'}}>
                    我是被隐藏的文字
                </div>
                <Child name='Bob' handleClick={this.handleClick} />
            </React.Fragment>
        );
    }
}
class Child extends Component{
    render(){
        const { handleClick } = this.props;
        //子组件拿到父组件的handleClick函数,并将它作为参数返回给父组件，父组件点击会触发对应的效果。
        return (<button onClick={handleClick}>点击显示隐藏的文字</button>);
    }
}