ReactJS | PropTypes-yiteyi-C++库

在我们之前关于道具的文章中，我们已经了解了如何使用道具将信息传递给任何组件。我们向组件传递了不同类型的信息，比如整数、字符串、数组等。让我们回顾一下我们如何将这些道具传递给组件的过程。我们可以创建defaultProps，也可以直接将props作为属性传递给组件。我们从组件外部传递道具，并在组件内部使用它们。但我们有没有检查过我们通过道具在组件中得到的是什么类型的值？不，我们没有。但后来一切都很顺利。我们是否使用组件内部的道具验证所获得的数据完全取决于我们。但对于更大的应用程序，验证我们通过道具获得的数据始终是一种良好的做法。这将有助于调试，也有助于避免将来出现错误。让我们看看如何做到这一点。

null

反应中的类型

在React 15.5.0版本发布之前，React包中提供了propTypes，但在React的更高版本中，必须在项目中添加依赖项。您可以使用以下命令在项目中添加依赖项：

npm install prop-types --save

我们可以使用原型用于验证我们从道具收到的任何数据。但在使用它之前，我们必须导入它。在索引顶部添加以下行。js文件：

import PropTypes from 'prop-types';

一旦我们导入了PropType，我们就可以使用它们了。与DefaultProp一样，PropType也是对象，其中键是道具名称，值是它们的类型。下面的语法显示了如何使用PropType：

ComponentClassName.propTypes{        propName1 : PropTypes.string,    propName2 : PropTypes.bool,    propName3 : PropTypes.array,    .    .    .    .    propNamen : PropTypes.anyOtherType}

在上述语法中 组件类名称 是组件类的名称， 任何其他类型 可以是我们可以作为道具通过的任何类型。对于不验证propTypes指定的数据类型的Prop，控制台上将出现警告。让我们来看一个完整的程序，它使用PropType进行验证，以便更好地理解：

javascript

                           import PropTypes from                                        'prop-types'                                        ;                         
                           import React from                                        'react'                                        ;                         
                           import ReactDOM from                                        'react-dom'                                        ;                         
            
                           // Component                         
                           class ComponentExample extends React.Component{                         
                                                     render(){                         
                                                     return                                        (                         
                                                     <div>                         
                                      
                                                     {                                        /* printing all props */                                        }                         
                                                     <h1>                         
                                                     {                                        this                                        .props.arrayProp}                         
                                                     <br />                         
            
                                                     {                                        this                                        .props.stringProp}                         
                                                     <br />                         
            
                                                     {                                        this                                        .props.numberProp}                         
                                                     <br />                         
            
                                                     {                                        this                                        .props.boolProp}                         
                                                     <br />                         
                                                     </h1>                         
                                                     </div>                         
                                                     );                         
                                                     }                         
                           }                         
            
                           // Validating prop types                         
                           ComponentExample.propTypes = {                         
                                                     arrayProp: PropTypes.array,                         
                                                     stringProp: PropTypes.string,                         
                                                     numberProp: PropTypes.number,                         
                                                     boolProp: PropTypes.bool,                         
                           }                         
            
                           // Creating default props                         
                           ComponentExample.defaultProps = {                         
            
                                                     arrayProp: [                                        'Ram'                                        ,                                        'Shyam'                                        ,                                        'Raghav'                                        ],                         
                                                     stringProp:                                        "GeeksforGeeks"                                        ,                         
                                                     numberProp:                                        "10"                                        ,                         
                                                     boolProp:                                        true                                        ,                         
                           }                         
            
                           ReactDOM.render(                         
                                                     <ComponentExample  />,                         
                                                     document.getElementById(                                        "root"                                        )                         
                           );                         

输出：

图片[1]-ReactJS | PropTypes-yiteyi-C++库

你可以在上面的程序中看到，我们正在传递名为 数字报 作为字符串，但作为数字进行验证。尽管如此，一切都在浏览器上完美呈现，但我们的浏览器控制台有一条警告信息。这条信息清楚地告诉我们，道具名为 数字报 应包含数值，但传递的是字符串值。你可以去官方的反应查看道具可以使用的所有有效类型。笔记：在最新版本的 反应PropTypes被移动到另一个包中 我们必须单独安装该软件包才能使用它。请到https://www.npmjs.com/package/prop-types链接以获取安装说明。

文章版权归作者所有，未经允许请勿转载。

THE END

技术文章