返回介绍

在 React 中如何校验 props 属性?

发布于 2024-08-09 20:39:58 字数 1161 浏览 0 评论 0 收藏 0

当应用程序以开发模式运行的时,React 将会自动检查我们在组件上设置的所有属性,以确保它们具有正确的类型。如果类型不正确,React 将在控制台中生成警告信息。由于性能影响,它在生产模式下被禁用。使用 isRequired 定义必填属性。

预定义的 prop 类型:

  1. PropTypes.number
  2. PropTypes.string
  3. PropTypes.array
  4. PropTypes.object
  5. PropTypes.func
  6. PropTypes.node
  7. PropTypes.element
  8. PropTypes.bool
  9. PropTypes.symbol
  10. PropTypes.any

我们可以为 User 组件定义 propTypes ,如下所示:

import React from 'react'
import PropTypes from 'prop-types'

class User extends React.Component {
static propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired
}

render() {
  return (
    <>
      <h1>{`Welcome, ${this.props.name}`}</h1>
      <h2>{`Age, ${this.props.age}`}</h2>
    </>
  )
}
}

注意: 在 React v15.5 中,PropTypesReact.PropTypes 被移动到 prop-types 库中。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文