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

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

1、正传props:

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

2、逆传:

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

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

2.4逆传案例二:(实现的是在子组件中删除组件的数据)

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

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

3、同级传值—pubsub-js:

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

4、跨组件传值context:

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

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

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

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React中,同级组件之间传递值是通过它们共同的父组件来实现的。具体步骤如下: 1. 在父组件中定义一个状态(state),用于存储需要传递给子组件的值。 2. 在父组件中创建一个方法,用于更新状态(state)的值。 3. 将这个方法作为props传递给需要接收值的子组件。 4. 在子组件中通过props接收并使用这个值。 下面是一个示例代码来说明这个过程: ```jsx // 父组件 class ParentComponent extends React.Component { constructor(props) { super(props); this.state = { value: '' }; } // 更新状态值的方法 updateValue = (newValue) => { this.setState({ value: newValue }); } render() { return ( <div> <ChildComponent value={this.state.value} /> <AnotherChildComponent updateValue={this.updateValue} /> </div> ); } } // 第一个子组件 class ChildComponent extends React.Component { render() { return ( <div> <p>接收到的值:{this.props.value}</p> </div> ); } } // 第二个子组件 class AnotherChildComponent extends React.Component { handleClick = () => { // 调用组件传递的方法来更新值 this.props.updateValue('新的值'); } render() { return ( <div> <button onClick={this.handleClick}>更新值</button> </div> ); } } ``` 在上面的例子中,父组件`ParentComponent`中定义了一个`value`状态,并将其传递给子组件`ChildComponent`。另外,父组件还将一个方法`updateValue`作为props传递给另一个子组件`AnotherChildComponent`。当点击`AnotherChildComponent`中的按钮时,调用`updateValue`方法来更新父组件中的值。 这样,子组件`ChildComponent`就能够接收并显示父组件中的值了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值