当前位置：首页 > 电脑培训 > react组件传递参数(react函数组件原理)

react组件传递参数(react函数组件原理)

作者：电脑培训网 2024-05-06 20:05:59 21

React功能组件在父子之间传递值并调用方法。一.前言

React作为前端语言，具有独特的灵活性，这也是它的魅力所在。前端组件化也将整个前端划分为组件。本期我们讲解了react组件之间的价值传递等，当然是我们自己的看法。话不多说，让我们进入代码。

react组件传递参数(react函数组件原理)

二.父子组件之间的传值

1.首先我们创建两个组件

父元素：person

子元素：chrlidren

父组件向子组件传值：

父组件通过props将值传递给子组件，子组件通过props接收。

父亲：

儿子：

结果：

子组件向父组件传值：

React从子级传递到父级。同样通过props，在父组件中定义一个函数并将其传递给子组件。子组件将值作为参数传递，父组件保存它。

父亲：

儿子：

结果：

二：非父子组件的传值

其实传值的方式有很多种，比如使用消息订阅、发布机制、redux等。

消息发布订阅机制：

首先你需要安装pubsub-js库

然后我们需要导入这个库

订阅消息；我们通过subscribe订阅消息，它接收两个参数。第一个参数是消息名称，第二个参数是消息成功的回调。回调还接受两个参数，一个是消息名称，另一个是返回值。数据

发布新闻：我们通过publish发布新闻

结果：

记得在useeffect中卸载它。

当然，我们也可以通过redux共享数据，形成组件之间的数据交互。我们将在下一期解释redux。

当然，我们也可以使用useContext来实现数据交互。

三，父子组件方法的调用

1.子组件调用父组件的方法，本质上还是通过props将父组件函数传递给子组件让进行调用。

父亲：

儿子：

结果：

2.父组件调用子组件的方法，两种方式。第一种使用forwardRef，第二种使用useImperativeHandle这里我们使用第二种。

1.useImperativeHandle有两个参数：

参数1:父组件传递的ref属性

参数2:返回一个对象，提供父组件中通过ref.current调用的对象中的方法。

父亲：

儿子：

结果：

本章我们只讲了大部分，后面也会讲到使用redux来传值。

相关推荐

  • 最新发布

热门推荐

猜你喜欢