zoukankan      html  css  js  c++  java
  • react 组件与组件之间通讯

    首先需要项目中安装events 包:  npm install events --save
    在src下新建一个util目录里面建一个events.js
    import { EventEmitter } from 'events';
    
    export default new EventEmitter();
    
    list1.jsx
    
    import React, { Component } from 'react';
    import emitter from '../util/events';
    
    class List extends Component {
        constructor(props) {
            super(props);
            this.state = {
                message: 'List1',
            };
        }
        componentDidMount() {
            // 组件装载完成以后声明一个自定义事件
            this.eventEmitter = emitter.addListener('changeMessage', (message) => {
                this.setState({
                    message,
                });
            });
        }
        componentWillUnmount() {
            emitter.removeListener(this.eventEmitter);
        }
        render() {
            return (
                <div>
                    {this.state.message}
                </div>
            );
        }
    }
    
    export default List;
    
    List2.jsx
    import React, { Component } from 'react';
    import emitter from '../util/events';
    
    class List2 extends Component {
        handleClick = (message) => {
            emitter.emit('changeMessage', message);
        };
        render() {
            return (
                <div>
                    <button onClick={this.handleClick.bind(this, 'List2')}>点击我改变List1组件中显示信息</button>
                </div>
            );
        }
    }
    export default List2;
    
    APP.jsx
    
    import React, { Component } from 'react';
    import List1 from './components/List1';
    import List2 from './components/List2';
    
    
    export default class App extends Component {
        render() {
            return (
                <div>
                    <List1 />
                    <List2 />
                </div>
            );
        }
    }

    react 兄弟组件如何调用对方的方法  https://segmentfault.com/a/1190000016764713

      

  • 相关阅读:
    实验三:UML 建模工具的安装与使用
    结对编程 第二阶段
    实验二:结对编程 第一阶段
    结对编程之github使用自己的仓库
    软工 实验一 Git代码版本管理
    第七次作业
    第5次作业
    第四次作业
    第三次作业
    第二次作业
  • 原文地址:https://www.cnblogs.com/whlBooK/p/11207532.html
Copyright © 2011-2022 走看看