react组件通信

react组件通信

1、组件通信通常分为以下几种方式：
（1）第一种父子组件通信
（2）第二种 父与孙子组件之间通信，
（3）第三种 兄弟组件通信或者说是不相关组件至今通信。
（4）消息订阅与发布

一、父子组件通信

1、父组件

   export default class Father extends Component{
     state={
       // 这里的属性随意定义
       id:111
   }
   const Edit = (value)=>{
      console.log('修改的值:' +  value)
    }
   render{
      return {
            <Child id={this.state.id} edit={this.Edit}/>
        }
   }
}

2、子组件

  1、第一种方式是父子类组件传参
  export default class Child extends Component{
     state={
       // 这里的属性随意定义
       id:111
   }
  conponentDidMount(){
      //只会执行一次，可以在任意方法里面通过this.props取出父组件传过来的属性和方法
      //this.props.Edit()
  }
   render{
     const {id} = this.props; 
      return {
           <div>{id}</div>
        }
   }
   2、第二种方式是通过函数组件传参
   const Child =(props)=>{
       //函数组件通过props方式获取父组件穿过来的任意的方法、值、对象等等
   }
}

第二种方式、孙子组件传参

爷孙传参这种方式传参如果通过第一种方式传参也能行得通，但是需要经过儿子组件层层传递，比较麻烦。而且还有一个弊端，那就是如果穿多个方式代码量就多了不少，而且从父组件传递方法给孙子组件时，尊自组件不好取传递过来的方法。所以不推荐第一种方式通过多个组件传参。

这里就用到第二种方式context传参
context传参写法有两种，看个人喜好用哪种。我推荐使用第一种写法。

第一种写法

1、第一步、新建一个createContext.js 文件，文件名字自己定义

import { createContext } from 'react';
const context = createContext(null);
export default context;

2、第二步、在需要传参的组件也就是父组件所在的文件中引入 context

import context from '../../util/createContext'; //多层组件传参

//使用context.Provider传递参数 ，value里面是传递的参数，这里我是传递了一个actionTag点击的标签名，getEntityAttr 获取实体的属性方法
<context.Provider value={{tagName:actionTag,getEntityAttr:this.getEntityAttr}}>
  //Myinput是里面的函数组件，属于儿子组件
   <Myinput attr={entity} tagName={actionTag} getlatestData={this.getlatestData} getEntityAttr={this.getEntityAttr} formRef={this.myRef} />
</context.Provider>

3、第三步、儿子组件嵌套

const Myinput = (props) => {
  //这里使用props是因为第二步方式我用props方式传递了参数，
   <Col span={24} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }}>
       <Custom type="2"/>  //Custom是孙子组件
       <Button type="primary" onClick={handleSubmit} style={{marginLeft:20}}> 提交</Button>
     </Col>
}

4、第四步、孙子组件Custom调用传递过来的参数

import React, { Component, useContext } from 'react';
//添加自定义属性
const Custom = (props) => {
 const [isModalVisible, setIsModalVisible] = useState(false);
 const [form] = Form.useForm();
 const {gethierarchy,getEntityAttr,tagName} = useContext(context) ||{}; //这里将传递过来的属性解构赋值，不懂得可以去学习es6的方法
 const showModal = () => {
   setIsModalVisible(true);
 };

 const handleOk = () => {
   form.submit();
   setIsModalVisible(false);
 };

 const handleCancel = () => {
   setIsModalVisible(false);
 };
 //提交自定义属性的值
 const onFinish = (value)=>{
      console.log(value)
      //当类别为1时更新选择的层级下的属性，当为2时更新选择的实体的属性
     if(props.type ==='1'){
         gethierarchy();   //这里由于不同地方传递过来所以需要调用不同的方法，具体需求具体对待
     }else{
       getEntityAttr(tagName);
     } 
     form.resetFields();
 }

 return (
   <>
     <Button type="primary" onClick={showModal}>
        添加自定义属性
     </Button>
     <Modal title="自定义属性" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} maskClosable={false} >
       <Form {...layout} form={form} onFinish={onFinish} style={{ maxHeight: 400, overflow: 'hidden', overflowY: 'auto' }}>
         <Form.Item label="自定义属性名" name="label">
             <Input />
         </Form.Item>
        
          <Form.Item label="自定义属性值" name="value">
             <Input />
         </Form.Item>
       </Form>
     </Modal>
   </>
 );
};

第二种写法

1、同样的方式新建一个context.js文件

import { createContext } from 'react'

export const { Provider, Consumer } = createContext();

2、第二步在传递的父组件这里引入context

 import { Provider } from '../../util/createContext'; //多层组件传参

//方式和第一种写法类似
<Provider value={{tagName:actionTag,getEntityAttr:this.getEntityAttr}}>
         <Myinput attr={entity} tagName={actionTag} getlatestData={this.getlatestData} getEntityAttr={this.getEntityAttr} formRef={this.myRef} />
</Provider>

3、在孙子组件中视同传递过来的参数

import { Consumer } from '../../util/createContext'; //多层组件传参
<Consumer>
           {
           //context就是一个对象，就是传递时的value
             context => (
               <>
                 {
                   tags.map((item, i) => {
                     return <Tag key={i} className={tagindex === i ? 'tag_active' : ''} onClick={() => this.handleTag(i, item, context)} style={{ lineHeight: '32px', cursor: 'pointer' }}>{item}</Tag>
                   })
                 }
               </>
             )
           }
</Consumer>

第三种方式 不相关组件传参，使用redux方式，具体参考方式请参照 react组件传参的几种方式

第四种方式

import PubSub from 'pubsub-js';
//或者
const PubSub = require('pubsub-js');

//订阅消息
let token = PubSub.subscribe('test','测试数据');
//取消订阅
PubSub.unsubscribe('test');
//发布消息
PubSub.publish('test','测试数据');