QuikieApps

您需要了解的有关Reactjs设置道具的所有信息

关于Reactjs设置道具的简介

反应的数据流和处理方法与其他框架不同。这使得在初始阶段很难理解一些概念,例如道具,状态等。 反应有一个基于组件的库,可以帮助用户界面分成可重用的小块。有时组件之间需要共享或发送数据。在组件之间传递数据的过程由reactjs set道具处理。

“道具”代表反应中的属性,它是一个特殊的关键字。它的工作是将数据从一个组件传递到另一个组件。而且,道具数据在只读模式下可用。子组件不允许更改或编辑来自父组件的数据。要记住的最重要的一件事是,通过prop传递的数据流是单向的。这意味着道具只能在父母与孩子之间共享,而不能相反。 

反应道具验证:

道具是React组件的单向只读属性。如果未正确使用它们,则在执行组件时会出现故障或问题。使用道具验证,我们可以提高反应成分的稳定性和效率。道具验证可帮助开发人员改善将来可能发生的错误和问题。这些工具会强制正确使用组件做出反应。 react组件借助一个称为PropTypes的特殊属性来捕获错误。此属性验证通过prop传递的值的数据类型。尽管不强制使用propTypes定义组件。但是将propTypes与react组件一起使用将是有益的,因为它将有助于解决或避免意外的错误。 

反应JS设置道具验证器

反应中总共有14个reactjs set props验证器。

1. PropTypes.any

不论其数据类型如何,均接受所有道具。

2. PropTypes.array

道具应强制排列。

3. PropTypes.bool

道具应强制为布尔数据类型。

4. PropTypes.number

道具必须是数字。

5. PropTypes.function

道具必须是一个功能。

6. PropTypes.object

道具必须是一个对象

7. PropTypes.string

道具必须是字符串。

8. PropTypes.instanceOf

对于Props,重要的是要成为JavaScript中特定类的实例。

9. PropTypes.symbol

道具必须是象征。

10. PropTypes.isRequired

必须提供该特定元素或项目任何部分的道具。

11. PropTypes.element

道具必须是一个要素。

12. PropTypes.node

道具必须能够呈现任何数据类型,例如数字,字符串,数组元素或诸如此类。 

13. PropTypes.oneOf()

在多个指定值中,道具必须是其中之一。 

14. PropTypes.oneOfType(PropType.string,PropType.number)

 在这里,道具必须充当可能是多种类型之一的对象。

如何设置道具反应?

步骤1:为属性定义属性和值(数据)

HTML使我们能够为其标签分配属性和值。同样,我们也可以分配相同的反应。 反应使我们能够定义自己的属性并在插值或大括号“ {}”内分配值。 

例,

<ChildComponent someAttribute = {值}

   anotherAttribute = {值} />

让我们为ChildComponent声明一个“文本”属性,然后为其分配一个字符串值。 

<子组件文本= {“道具编号1”} />

如我们所见,ChildComponent现在具有一个属性和一个值。现在我们需要看看如何通过道具传递它。

步骤2:使用道具传递值或数据

在响应组件中传递Props非常简单。就像我们通过传递道具一样,将参数传递给函数。这些道具带来了该组件所需的所有必要数据。道具只是在React中传递的参数。 

例,

const ChilComponent =(道具)=> {

    返回<p> Prop number 1. </p>;

};

步骤3:渲染道具数据

到目前为止,我们已经创建了一个属性及其值。我们也通过道具传递了它。但是我们无法访问它,因为我们尚未渲染它。 

在这里,我们将使用字符串插值(即{props})将prop渲染为对象。

让我们在将道具登录到控制台后看一下它的外观。

我们得到的输出是“”对象{“道具编号1”}“”  

在这里我们可以看到道具已经返回了对象。借助点(。)表示法,我们可以访问JavaScript中的对象元素。因此,我们需要通过插值渲染文本属性,

const ChildComponent =(道具)=> {

返回<p> { props.text} </p>;

}

这样,我们可以将数据从父组件渲染到子组件。现在,ChildComponent能够呈现自己的道具数据。因此,按照这种方式,我们可以在道具的帮助下将静态组件转换为动态组件。

结论:

与其他框架相比,React具有不同类型的数据流。道具在响应中非常重要,因为它们简化了数据流。必要时,道具将单向流父组件中的数据传输到子组件。这些是react中的特殊关键字,用作属性的缩写。甚至通过props传递的数据也只能以只读模式提供给子组件。这意味着子组件无法通过prop修改从父组件接收的数据。

道具验证器用于验证道具,以检查它们是否运行平稳并修复将来的错误。反应中共有14个属性验证器。

设置或使用道具非常简单,只需3个步骤即可完成。首先,我们需要定义属性及其值。然后,我们需要使用道具传递那些属性。最后,我们只需要渲染这些道具即可访问它们。 

 

Exit mobile version