前端圈

分享与交流前端开发相关知识

React:在组件之间传递数据

反应概述

React是一个用于构建用户界面(UI)的JavaScript库。对于开发人员来说,使React如此受欢迎的原因是它能够更轻松,更易于管理地构建UI。React使用一种称为JSX的语法来描述UI的外观。
JSX允许我们将HTML放入JavaScript中,而不是将JavaScript放入HTML中。react需要一个称为babel的trans编译器来弥合语言之间的差距和计算机可以理解的东西。

状态/道具

React通过状态来管理其数据。State是一个JavaScript对象,其值是可变的。状态只能在父组件内部使用,因此,如果我们想访问其他组件中的状态数据,则需要道具。状态之类的道具也是JavaScript对象,但值是不可变的。道具是其他组件将用来访问状态内数据的工具。props是我们如何将数据从父组件传递到子组件。

将数据从父母传递给孩子

要将数据从父组件传递到子组件,我们需要访问状态外部的状态数据。因此,为此,我们将使用道具。让我们来看一个例子。

《React:在组件之间传递数据》
在这里,我们声明一个子代,并赋予它等于{this.props.value}的值

儿童1
《React:在组件之间传递数据》

将数据从孩子传递给父母

             **Let’s add a second component**

新父母 我们将孩子二作为div并 从州给了它道具
《React:在组件之间传递数据》

小孩2

《React:在组件之间传递数据》

在这个新组件中,我们想要更改我的道具的值,但是如前所述,道具是不可变的,因此要更改我的道具的值,我们需要一种更改状态值的方法。最简单的方法是在组件中添加一个函数来操纵父组件中的状态。为此,我们添加了一个方法,onclick将触发父组件状态的改变,因此我们可以为颜色添加一个新值。让我们看看第二个组件和新的父组件的外观

在此处添加了功能的组件2中,您可以看到我们将功能绑定 到所需的作用域。
《React:在组件之间传递数据》

新的父功能

《React:在组件之间传递数据》
在父函数中,我们向
将要触发的状态添加了一个函数

梯子

如果有一个子组件,则可以将数据从子组件传递给父组件。如果有多个,我们必须确保数据也从同级传递到那些组件。我们有一个更改父组件的顺序。我们不能仅从组件3跳到父组件,而跳过传递组件2,则将新道具添加到组件1,以便它也可以接受状态的新值。

儿童1
《React:在组件之间传递数据》

结论

将props从父代传递给孩子很容易,但是将值从孩子传递给父母会有点额外,我们必须创建一个函数。我们必须在组件中创建一个函数,该函数将触发状态更改。然后在父组件的状态下创建该函数。我们也很容易在兄弟姐妹之间传递数据以确保他们得到相同的交互

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注