17. prop types 库的使用原理 - yiqunkeke/react-jianshu-shangguigu-zty GitHub Wiki
import PropTypes from 'prop-types'; // 引入库
// PropTypes 提供了一系列的校验规则,来确保你接收的数据是合法的。
// 当传递了不合法的值时,控制台会报出警告。
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
// 给组件添加 `propTypes`属性 ---- 校验prop属性的类型
Greeting.propTypes = {
name: PropTypes.string
};
// `propTypes` 只会在开发环境中做校验。(出于性能原因)
// 给组件添加`defaultProps`属性 ---给props添加默认值
Greeting.defaultProps = {
name: 'Stranger'
};
// `propTypes`会在`defaultProps`之后会解析,所以`propTypes`也同样会作用于`defaultProps`