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

一、正传props：

1、组件中使用rccp快速生成一个子组件(rccp快捷键会自动生成props验证）

2、在父组件调用子组件并传递数据给子组件

3、在子组件接收父组件传递过来的数据

二、逆传

思路：逆传需要通过单机事件触发，在父组件中传递一个函数在子组件，在子组件触发函数，逆传数据以形参的方式传递给父组件。
1、在父组件调用子组件，并产地一个函数给子组件

2、在子组件触发父组件传递过来的函数，并返回数据给父组件

逆传小案例：

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

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

2、在子组件被调用的时候，传递进去一个函数，但是这个函数必须有一个形参，这个形参用来接收子组件传递过来的数据

三、同级传值—pubsub-js

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

3、在zia.jsx中进行抛出

4、在zib.jsx中监听自定义事件抛出

四、跨组件传值context

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

context上下文对象（重要）

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

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

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

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

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

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

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

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

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

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

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

如图数据在顶层：

如果组将向使用这个数据，不用引入Provider 对组件进行包裹，直接在组件中使用即可。