1. PropTypes类型检查
自 React v15.5
起,React.PropTypes
已移入另一个包中。请使用prop-types
库代替。
这里使用的方式是手脚架方式创建的项目,即:
>create-react-app test
所以可以直接在项目目录下package.json
中看到当前react
的版本:
"react": "^18.1.0",
故而这里,我需要单独安装prop-types
库依赖:
npm i prop-types
安装后就可以在package.json
文件中看到:
"prop-types": "^15.8.1",
2. 案例
比如限制传入子组件的参数为字符串,且是必须的:
// 子组件
class Item extends Component{
render() {
const {
data} = this.props
return (
<div>
{
data}
</div>
)
}
}
// 可以限制一下传入子组件的参数的类型
Item.propTypes = {
data: PropTypes.string.isRequired
}
如果我们按照下面的代码使用:
class PropTypesDemo extends Component {
constructor() {
super();
this.state = {
datas: [
{
id:'001',name: "张三"},
{
id:'003',name: 123},
{
id:'002',name: "王五"},
]
}
}
render() {
const {
datas} = this.state
return (
<div>
{
datas.map((item, index) => {
return <Item key={
item.id} data={
item.name}/>
})
}
</div>
);
}
}
可以显示出来结果,但是控制台会出现错误:
也就可以做到对类型的简单检测功能。