React Props 验证

Props 是将只读属性传递给 React 组件的重要机制。 Props 通常需要在组件中正确使用。 如果使用不正确，组件可能无法按预期运行。 因此，需要使用 props 验证来改进 react 组件。

Props 验证是一个工具，可以帮助开发人员避免未来的错误和问题。 这是强制正确使用组件的有用方法。 它使您的代码更具可读性。 React 组件使用特殊属性 PropTypes，通过验证通过 props 传递的值的数据类型来帮助您捕获错误，尽管没有必要使用 propTypes 定义组件。 但是，如果您在组件中使用 propTypes，它可以帮助您避免意外错误。

验证 Props

App.propTypes 用于 react 组件中的 props 验证。 当某些 props 以无效类型传递时，您将在 JavaScript 控制台上收到警告。 指定验证模式后，您将设置 App.defaultProps。

语法

ReactJS Props 验证器

ReactJS props 验证器包含以下验证器列表。

示例

在这里，我们创建了一个包含所有我们需要 props 的 App 组件。 在这个例子中，App.propTypes 用于 props 验证。 对于 props 验证，您必须添加以下行：在 App.js 文件中添加 import PropTypes from 'prop-types'。

App.js

Main.js

输出

ReactJS 自定义验证器

ReactJS 允许创建自定义验证函数来执行自定义验证。 以下参数用于创建自定义验证函数。

• props: 它应该是组件中的第一个参数。
• propName: 它是将要验证的 propName。
• componentName: 它是将再次验证的 componentName。

示例