React学习-PropTypes属性检测

React学习-PropTypes属性检测

• 首先需要用npm安装一下prop-types，安装命令

npm i prop-types

• 在你需要进行检测的组件上，引入prop-types的包

import propTypes from 'prop-types'

• 接下来使用propTypes和defaultProps进行相应的配置，配置如下

Demo.js

import React,{Component} from 'react';
import propTypes from 'prop-types'
export default class Demo extends Component{
    render(){
        let {tit} = this.props;
        return (
            <div>
                {tit}
            </div>
        )
    }
}
Demo.propTypes = {
    tit:propTypes.string,
    children:propTypes.element.isRequired
}
Demo.defaultProps = {
    tit:'bbb'
}

App.js

import React,{Component} from 'react';
import Demo from './Demo'

export default class App extends Component{
  state = {
    msg:'我是来自父组件的值'
  }
  render(){
    return(
      <div>
        <Demo tit={this.state.msg}/>
      </div>
    )
  }
}

来看看效果吧👇

子组件正常显示了来自父组件的值

那如果传递的参数不是string而是别的呢

我们用boolean类型来尝试下

<Demo tit={true}/>

往子组件直接传一个Boolean类型的true过去

可以看到控制台直接就报错了，大概意思就是boolean不能往子组件中传递

ok，关于react脚手架的prop-types属性检测就说这么多啦。