react中的props校验

最新推荐文章于 2025-04-08 10:36:37 发布

碑无名

最新推荐文章于 2025-04-08 10:36:37 发布

阅读量498

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/deep_zhuheihei/article/details/123386404

版权

react 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在React组件中使用prop-types进行属性类型校验，包括number、func、element和对象shape的使用实例，以及fn属性的必填要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


/* props约束规则 */
import PropTypes from 'prop-types'
const App=props=>{
  return(
    <div>
      <h1>prop校验：</h1>
    </div>
  )
}
/* 
    属性a的类型    数值（number）
    属性fn的类型   函数（func并且为必填项
    属性tag的实现   React元素（element）
    属性filter的类型   对象({area:'上海'，price:1999})
*/
App.propTypes={
  a:PropTypes.number,
  fn:PropTypes.func.isRequired,
  tag:PropTypes.element,
  filter:PropTypes.shape({
    area:PropTypes.string,
    price:PropTypes.number
  })
}
ReactDOM.render(<App fn={()=>{}}></App>,document.getElementById("root"))