QuikieApps

React Prop类型:好处,安装和使用

什么是React Prop类型?

React prop类型基本上是运行时类型检查。道具类型检查对象或变量之间的相似性。我们可以记录要使用prop类型的属性类型的React组件。 React库和许多其他库验证了将要传输的代码中的道具。他们将使用checkPropTypes根据所有这些定义检查将运行的组件。如果它们不匹配,则会警告我们。在props中,我们已经看到了如何使用props在任何组件中传递信息。我们可以传递不同类型的信息,例如数组,字符串,整数等,作为组件中的道具。 

那么,回想一下如何在组件中传递道具呢?为了在道具中传递道具,我们可以做两件事。我们可以将道具直接作为属性传递给组件,也可以创建默认道具。 我们曾经从组件外部传递道具,然后在其他组件内部使用它们。但是,在那儿我们还没有检查通过道具获得的值的类型。尽管如此,还是可以的。

React中的道具类型:

为了验证从props接收的任何数据,我们应该使用propType。 但是,在使用该模块之前,我们都知道我们必须导入该模块。为了做到这一点,我们将在我们的顶部添加以下行 index.js 文件:

从“道具类型”中导入道具类型;

导入propTypes之后,我们就可以在程序中使用它的功能了。同样,defaultProps, propTypes也是键描述道具名称的那些对象之一。此处的值描述了它们的类型。以下代码显示propTypes的用法:

ClassComponentName.propTypes

{

    prop1:PropTypes.array,

    prop2:PropTypes.bool,

    prop3:PropTypes.String,

    .

    .

     .

    .

propn:PropTypes.dataType

}

因此,在上面的语法中,我们看到ClassComponentName是属于该类的Component的名称。可以将DataType视为我们可以作为道具传递给组件的任何类型。对于未验证指定数据类型的道具,控制台上将出现警告。

因此,现在我们将看到完整的程序,以更好地了解我们将使用propTypes进行验证的位置:

正如我们之前看到的,我们将名称为numberProp的prop作为字符串传递。但是,它将验证它为数字。尽管如此,除此以外的所有内容都已在浏览器中完美呈现。但是为此,我们的浏览器控制台已经具有警告消息。

在此消息中,我们可以看到名为numberProp的道具应该包含一个数值。但是代替该输入的是一个字符串值。为了全面了解道具可以采用的有效类型,您可以始终参考ReactJS的官方文档。在其中提到了道具可以采用的所有有效类型。另外,在最新版本的React中,他们已经将React.PropTypes移动到了新的目的地。该目的地是一个不同的软件包,必须单独安装才能使用。

React Prop类型的优点:

ProtoTypes帮助我们键入检查道具。它还会警告我们是否传递了与子组件预期使用的道具不同类型的道具。众所周知,JavaScript是一种动态类型的语言。并且这些类型是在运行时确定的。静态类型的Java和变量的类型必须在初始化过程中进行标识。之后,它应该不再更改。借助PropsTypes,我们可以设置所需的类型。只需在我们拥有的组件中使用PropsTypes属性,就可以做到这一点。 

安装和使用:

建议使用Prop-Types库,而不要使用它们自己的库。为了在您的React应用程序中使用propsTypes,我们需要安装以下props-types库:npm i props-types。 

反应道具类型:基本验证:

我们可以声明prop是JavaScript的一种特定类型,默认情况下,它们都是可选的。

PropTypes.array:由此指定prop是一个数组。

PropTypes.bool:由此指定prop是布尔值。

PropTypes.func:由此指定prop是一个函数。

PropTypes.number:由此指定prop是数字。

PropTypes.object:由此指定道具是一个对象。

PropTypes.string:由此指定prop是字符串。

PropTypes.symbol:由此指定道具是一个符号。

 道具类型:React元素验证

已指定应使用以下命令发送React读取的所有内容:PropTypes.node。如果我们只希望传递React元素,则应使用:PropTypes.element。

道具类型:实例验证:

道具的实例可以被验证。无论我们做什么,我们都必须指定共享的道具应该是任何特定类的实例。我们还可以声明一个prop是一个类的实例,并利用instanceof运算符:PropType.instanceOf(class)

PropTypes:特定值验证:

我们可以做的是指定我们的道具必须是一些非常具体的值,并且也必须是这个,那个或集合中存在的任何值。 

道具类型:多重验证

最重要的是道具是任何给定类型的。道具类型可以是从字符串到模型的任何类型。除列表外的任何其他内容都将被拒绝。结果,我们将收到一个错误。

道具类型:传递任何东西

React还可以确保提供了道具。因此,我们需要将isRequired附加到任何PropTypes验证器。

 

结论: 

在本文中,我们了解了很多有关React Props Types的知识,以及如何检查React组件中的类型。这样的验证肯定会帮助我们预测React组件在其开发阶段的结果。我们希望您喜欢本文,并希望它向您展示了props和propsTypes在构建React应用程序的过程中的重要性。没有它们,当存在某种形式的交互时,对于我们而言,要在这些组件之间继续传递数据确实非常困难。它们构成了React所针对的自我管理的组件驱动架构的核心部分。

PropTypes就像一个奖励,因为它们可以帮助我们确保组件使用正确的数据类型,并确保它们传递正确的数据,并且组件也使用正确的props类型。它还确保接收端也接收正确类型的道具。 

 

Exit mobile version