react组件之间参数传递—正传props—逆传—同级传值pubsub—跨组传值详细步骤

古城微笑少年丶 2022-11-21 06:56 350阅读 0赞

## 一、正传props： ##

**1、组件中使用rccp快速生成一个子组件(rccp快捷键会自动生成props验证）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]  
**2、在父组件调用子组件并传递数据给子组件**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]  
**3、在子组件接收父组件传递过来的数据**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]

## 二、逆传 ##

思路：逆传需要通过单机事件触发，在父组件中传递一个函数在子组件，在子组件触发函数，逆传数据以形参的方式传递给父组件。  
**1、在父组件调用子组件，并产地一个函数给子组件**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]  
**2、在子组件触发父组件传递过来的函数，并返回数据给父组件**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]

### 逆传小案例： ###

#### 在子组件触发事件删除父组件对应的数据。 ####

**1、在子组件使用this.props.xxx来接收父组件传递过来的数据，并且使用.bind(this.“你要传给父组件的数据”)**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 6]  
**2、在子组件被调用的时候，传递进去一个函数，但是这个函数必须有一个形参，这个形参用来接收子组件传递过来的数据**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 7]

## 三、同级传值—pubsub-js ##

同级传值使用插件：pubsub-js  
1、下载 npm install --save pubsub-js  
2、新建两个子组件，这边我建了两个子组件分贝为"zia.jsx"和"zib.jsx",并在父级中使用这两个组件，接下来开始同级传值

3、在zia.jsx中进行抛出  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 8]  
4、在zib.jsx中监听自定义事件抛出

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 9]

## 四、跨组件传值context ##

react 组件间传递数据是通过 props 向下，是单向传递的，从父级一层一层地通过 props 地向下传递到子子孙孙，有的时候我们组件一层一层的嵌套多层，这样这种方式一层一层传递麻烦，如果想跃层传递，这就会用到 context。

#### context上下文对象（重要） ####

作用 是用来进行跨层级传值  
\*\*createContext()：\*\*用于创建context，需要一个defaultValue的参数，并返回一个包含Provider（提供者），以及Consumer（消费者）的对象  
**Provider**对象 生产者---->用来生产数据  
**Consumer**对象 消费者---->用来使用数据

##### 1、在src下创建文件与文件夹用来容纳context对象 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 10]

import {createContext} from "react"
    let context=createContext()
    export let {Provider,Consumer}=context

##### 2、在需要传递数据的组件中引入生产者Provider #####

`import {Provider} from "../../util/MyContext`  
需要将数据传给那个子组件，你就用`Provider`包裹那个组件，传递数据的方式看下图。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 11]

`将数据传递给子组件以后，子组件的后代组件都可以接收到该数据，接收方式都一样`

##### 在子组件中接收传递过来的数据 #####

在子组件中引入`Consumer`  
import \{Consumer\} from “…/util/MyContext”

<Consumer>
                       {
                           (val)=>{
                               return <div>{val.obj}</div>
                           }
                       }
                   </Consumer>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 12]

##### 在孙组件中接收传递过来的数据 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 13]

##### 如果数据在顶层组件没有使用Provider组件时 #####

如图数据在顶层：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 14]  
如果组将向使用这个数据，不用引入`Provider` 对组件进行包裹，直接在组件中使用即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 15]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/8848b77914d24afbacba5e7b547be770.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/088d5ad20e1642d98783ba6e1fe2f97d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/cf3d63c49bc74293a83836cde1efdb10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/f76ed899291c435695f47880eff6224a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/7377a3577d8e48ac8046971806265c54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/1ca496a648374414bd0a87ead5f3615f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221120/6db757199d434f1698b41a2e536770dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221120/bee1cfcca4014a8cad4857e8cad3ea8f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221120/a12248008b324d15b4fee08f9dcf1e00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221120/4fbad1df9ed84c1bbf5f21bef87fb9b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221120/24aacc8455e542c6bf48cb2f6eda40e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221120/0659ff4550024c8ca9ea9f954b914506.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221120/2ffd5427609248e39b8dc450df28b4e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221120/6b512e0ec9e9412a979bdc6b3deece40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221120/06fcf63f635140e4a6bb1d0d6fb0041d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20221120/60643b47aefd4324a210de8a3682d249.png