React 组件之间参数传递，正传props，逆传，同级传值，跨组件传值context

我会带着你远行 2022-12-09 15:57 263阅读 0赞

### 以下主要是react四种组件传值方式 ###

#### 1、正传props： ####

1.1、rcc快速创建组件  
1.2、在调用组件的地方传值  
![在这里插入图片描述][20200923002221661.png_pic_center]  
1.3、在组件中接收数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]

#### 2、逆传： ####

2.1、在父组件中先声明一个函数，该函数有一个形参来接收子组件逆向传递过来的数据，  
2.2、在父组件中将这个函数的调用方式传递给子组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]

2.3、在子组件中通过单击事件来触发，bind中第一个参数修改this指向，第二个参数为要传递的数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]

#### 2.4逆传案例二：（实现的是在子组件中删除组件的数据） ####

2.4.1在子组件使用this.props.xxx来接收父组件传递过来的数据，并且使用.bind(this.“你要传给父组件的数据”)

\*\*注意：\*\*下面这一步使用到了结构赋值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]  
2.4.2、在子组件被调用的时候，传递进去一个函数，但是这个函数必须有一个形参，这个形参用来接收子组件传递过来的数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]

#### 3、同级传值—pubsub-js： ####

**同级传值使用pubsub-js**  
3.1、下载 npm install --save pubsub-js  
3.2、在第一个组件中进行数据抛出 PubSub.publish(“事件名”,“数据”)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]  
3.3在同级组件接收抛出来的数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 6]

#### 4、跨组件传值context： ####

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

**context使用**  
context：上下文对象  
作用 是用来进行跨层级传值  
**Provider对象** 生产者---->用来生产数据  
**Consumer对象** 消费者---->用来使用数据

4.1、在src下创建文件与文件夹用来容纳context对象  
![在这里插入图片描述][2020092300314555.png_pic_center]  
4.2、创建内容并且引用createContext对象  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 7]  
4.3、全局引用（在src根目录下的index.js中全局引用）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 8]  
4.4、在任意位置使用  
要使用先引用  
import \{Consumer\} from “…/myprovider/myProvider.js”  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 9]

[20200923002221661.png_pic_center]: /images/20221123/2bc1c9583df44bc2804bc9084350a8f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/4a541823b709480c9947c5a8749a7541.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/1d45e90e9cab4af884f5a15b4a18c727.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/0cd5bd0f7ac0435897db04eee7723fb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/fc2344b75fc34a1590d4c42ac4d86884.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/daa2cdea291d4a718f772507b8c72ac5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/41e42f1cab794d8ca2106e7d2893d4c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/b4474f1689ae4f539cbc049e26838693.png
[2020092300314555.png_pic_center]: /images/20221123/c35acd18b1ec4f2c8a78abe10c8c4643.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/8aa7dee3cdb2498c94acc8a33d88e1e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/35e2347196764041b697e78419ec4b7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/cc8b180eeb1441f7887eced75c4afb53.png