react中 跨组件通信的实现

react中跨组件通信

例如 Grandfather ------>Father ------->Son

这样三层 Grandfather想要直接与Son 通信

1.跨组件通信

首先先新建一个context文件夹 在文件夹下新建一个index.js文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kUp6ffkb-1597846674615)(C:\Users\86152\AppData\Roaming\Typora\typora-user-images\image-20200819215333828.png)] 比如这个样子

2.在context文件夹下的index.js文件中引入createContext 然后暴露出去一个自定义的createContext(0) //0是一个初始值 给不给无所谓

index.js代码如下

import { createContext} from 'react'

export const qqqqq =createContext(0)

其中qqqqq为自定义的 名字取什么无所谓 但是后面使用的时候要统一

3.然后我们去Grandfather中去使用

首先引入刚刚暴露出去的自定义的createContext(0) 即那个qqqqq

在Grandfather.js组件中引入

import { qqqqq } from "./context";

当我们引入这个时候 在组件中就可以使用一个标签 <qqqqq.Provider></qqqqq.Provider>

把子组件放到里面 这个标签有一个value属性 可以在这里给value赋值 然后在组件中获取这个值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5KUa22rh-1597846674620)(C:\Users\86152\AppData\Roaming\Typora\typora-user-images\image-20200819220614159.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cNMH928v-1597846674623)(C:\Users\86152\AppData\Roaming\Typora\typora-user-images\image-20200819220700644.png)]

4.然后再Son.js组件中同样导入

import {qqqqq} from './context'

在render（）函数之前写

 static contextType =qqqqq

然后在 jsx模板中通过this.context来获取Grandfather传过来的value