react 组件远距离通信 EventEmitter

最新推荐文章于 2023-03-20 17:12:28 发布

Cribug8080

最新推荐文章于 2023-03-20 17:12:28 发布

阅读量2.7k

点赞数

分类专栏： react js 文章标签：组件通信 EventEmitter

本文链接：https://blog.csdn.net/Cribug8080/article/details/89228032

版权

js 同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

react

12 篇文章 0 订阅

订阅专栏

订阅者发布者模式，组件之间通信。
两个组件Father、Father2
可以直接复制下来当成html文件打开。查看效果

<!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}>兄嘚1号</h1>
                    </div>
                )
            }
        }

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

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

        ReactDOM.render(
            <div>
                <Father />
                <Father2 />
            </div>,
            document.getElementById("example")
        )
    </script>
</body>
</html>