React 组件之间的数据传递
正向传值–使用 props
父组件发送数据在子组件中使用 this.props.xxx
来接收数据,如果父级的某个props
改变了,React
会重渲染所有的子节点
逆向传值—函数传值
- 子组件通过事件调用函数传递
- 在子组件中使用
this.props
调用的函数名绑定发送数据。 - 在父组件中进行函数传递。
- 父组件中必须要有一个形参用来接收子组件发送过来的数据。
同级传值—pubsub-js
- 在第一个要传值的组件中进行数据抛出
PubSub.publish(" 事件名","数据")
。 - 在第二个要接收数据的组件中接收
PubSub.subscribe("监听的事件",(事件,数 据)=>{})
。
跨组件传值—context
- context 上下文对象,无需为每一层组件手动添加
props
,就能在组件数间进行数据传递的方法。 - 使用
createContext()
方法提供了两个对象 -Provider
对象生产者---->用来生产数据 -Consumer
对象消费者---->用来使用数据。