开发者社区> 问答> 正文

#React 如何在React中对props进行验证?

#React 如何在React中对props进行验证?

展开
收起
因为相信,所以看见。 2020-05-07 17:21:37 978 0
1 条回答
写回答
取消 提交回答
  • 阿里,我所有的向往

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

    一组预定义的道具类型:

    PropTypes.number PropTypes.string PropTypes.array PropTypes.object PropTypes.func PropTypes.node PropTypes.element PropTypes.bool PropTypes.symbol PropTypes.any 我们可以propTypes为User组件定义如下:

    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>
          </>
        )
      }
    }
    
    

    注:在阵营V15.5 PropTypes从移动React.PropTypes到prop-types库中。

    2020-05-07 17:22:42
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
利用编译将 Vue 组件转成 React 组件 立即下载
React Native 全量化实践 立即下载
React在大型后台管理项目中的工程实践 立即下载