react组件之间通信

父子组件之间通信

父组件向子组件通信

// 父组件
import React, { Component, Fragment } from 'react';
// 引入子组件
import ManageStockPop from '@/pages/groupOrder/components/ManageStock'; 
export default class GroupOrderDetail extends Component {
  state = {
    manageStockVisible: false, // 控制子组件的显示与否
  };
  render() {
    const {
      manageStockVisible,
    } = this.state;
    return (
        <ManageStockPop
          visible={manageStockVisible}
        />
    );
  }
}
// 子组件
import React, { Component } from 'react';
export default class ManageStockPop extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }
  // getDerivedStateFromProps 生命周期
  // 比较nextProps 与 prevState 中的值 进而更新state中的值
  static getDerivedStateFromProps(nextProps, preState) {
    if (nextProps.visible !== preState.visible) {
      return {
        visible: nextProps.visible, // 获取到父组件传过来的值
      };
    }
    return null;
  }
  render() {
    let { visible } = this.state;
    return (
      <Modal
        width="800px"
        title="title"
        visible={visible}
      >
      </Modal>
    );
  }
}

子组件向父组件通信

// 子组件
import React, { Component } from 'react';
export default class ManageStockPop extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }
  static getDerivedStateFromProps(nextProps, preState) {
    if (nextProps.visible !== preState.visible) {
      return {
        visible: nextProps.visible,
      };
    }
    return null;
  }
  // 取消方法
  haddleCancel = () => {
    this.setState({
      visible: false,
    });
    const { onClose } = this.props;
    // 判断父组件中是否有onClose 方法 并调用
    // onClose方法中可以传参数
    // 如 onClose(1)
    onClose && onClose();
  };
  // 确定方法
  haddleSubmit = () => {
    const { onChange } = this.props;
    // 判断父组件中是否有onChange 方法 并调用
    onChange && onChange();
    this.haddleCancel();
  };
  render() {
    let { visible } = this.state;
    return (
      <Modal
        width="800px"
        title="title"
        visible={visible}
        onOk={() => this.haddleSubmit()}
        onCancel={this.haddleCancel}
      >
      </Modal>
    );
  }
}

// 父组件
import React, { Component, Fragment } from 'react';
import ManageStockPop from '@/pages/groupOrder/components/ManageStock'; // 批量管理库存 popUp
export default class GroupOrderDetail extends Component {
  state = {
    manageStockVisible: false,
  };
  // onClose的回调方法
  // 可以接收参数manageStockClose(num) // 1
  manageStockClose = () => {
    this.setState({
      manageStockVisible: !this.state.manageStockVisible,
    });
  };
  // onChange的回调方法
  manageStockChane = () => {
    this.setState({
      manageStockVisible: !this.state.manageStockVisible,
    });
  };
  render() {
    const {
      manageStockVisible,
    } = this.state;
    return (
        <ManageStockPop
          visible={manageStockVisible}
          onClose={this.manageStockClose}
          onChange={this.manageStockChane}
        />
    );
  }
}

无关系组件之间通信

1. 安装event

 npm install event -save

2. 创建Event.js

   import { EventEmitter } from 'events'; 
   export default new EventEmitter();

3. 使用
   发布者使用emit事件触发方法
   订阅者通过addListener方法进行事件监听
   订阅者通过removeListener方法进行事件销毁

// 发布者
import event from './Event.js'; // 引入Event.js
event.emit('eventUse', 'Hello 我来发消息了');

// 订阅者
componentDidMount () { //在组件挂载完成后声明一个自定义事件
  event.addListener('eventUse', (msg) => {
    console.log('收到消息--'+msg)
    // '收到消息--Hello 我来发消息了'
  })
}
componentWillUnmount () { //组件销毁前移除事件监听
  event.removeListener('eventUse', (msg) => {
    console.log('即将销毁此消息--'+msg)
    // '即将销毁此消息--Hello 我来发消息了'
  })
}