React基础—PropTypes类型检查

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

可以显示出来结果，但是控制台会出现错误：

也就可以做到对类型的简单检测功能。