props校验

props校验-场景和使用

目标任务：掌握组件props的校验写法，增加组件的健壮性。

对于组件来说，props是由外部传入的，我们其实无法保证组件使用者传入了什么格式的数据，如果传入的数据格式不对，就有可能会导致组件内部错误 —— 组价的使用者可能也不知道为什么报错~

代码测试

//项目的根组件
//App  ->index.js ->public/index.html(root)

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

function Test({ list }) {
 return (
   <div>
     {list.map(item => <p>{item}</p>)}
   </div>
 )
}

Test.PropTypes = {
 //定义各种规则
 list: PropTypes.array//限定这里的list参数的类型必须是数组类型
}

class App extends React.Component {
 render() {
   return (
     <div>
       <Test list={9} />
     </div>
   )
 }
}


export default App;

props校验-规则说明

四种常见结构

1. 常见类型：array、bool、func、number、object、string
2. React元素类型：element
3. 必填项：isRequired
4. 特定的结构对象：shape({})