一、正传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
对组件进行包裹,直接在组件中使用即可。