react 组件远距离通信 EventEmitter

订阅者发布者模式，组件之间通信。
两个组件Father、Father2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>react 组件通信</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdn.bootcss.com/EventEmitter/5.2.6/EventEmitter.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        var ee = new EventEmitter();

        class Father extends React.Component{
            constructor(){
                super()
                this.state={
                    style:{color:'black'}
                }
            }
            
            componentDidMount(){
                this.eventE1 = ee.addListener("callMe",(color)=>{
                    this.setState({
                        style:{color:color}
                    })
                    console.log(color)
                })
            }

            componentWillUnMount(){
                ee.removeListener(this.eventE1)
            }

            render(){
                return (
                    <div>
                        <h1 style={this.state.style}>Father</h1>
                        <button>兄嘚</button>
                    </div>
                )
            }
        }

        class Father2 extends React.Component{
            subFn(color){
                return ()=>{
                    ee.emit("callMe",color)
                }
            }

            render(){
                return (
                    <div>
                        <h1>Father2</h1>
                        <button onClick={this.subFn('red')}>兄嘚red</button>
                        <button onClick={this.subFn('blue')}>兄嘚blue</button>
                    </div>
                )
            }
        }

        ReactDOM.render(
            <div>
                <Father />
                <Father2 />
            </div>,
            document.getElementById("example")
        )
    </script>
</body>
</html>
参考文档
react 组件远距离通信 EventEmitter

猜你喜欢
