propTypes与defaultTypes解析
程序员文章站
2022-03-13 09:26:11
proptypes:
为防止父给子组件传递的参数不是子组件期望的参数类型而导致程序运行错误,在子组件中可以对父组件传递过来的参数进行校验,使用的就是proptypes。
使用方...
proptypes:
为防止父给子组件传递的参数不是子组件期望的参数类型而导致程序运行错误,在子组件中可以对父组件传递过来的参数进行校验,使用的就是proptypes。
使用方法:
import proptypes from 'prop-types'; class greeting extends react.component { render() { return (
hello, {this.props.name}
); } } greeting.proptypes = { name: proptypes.string };引入proptypes,调用组件proptypes属性对参数进行校验。proptypes导出一系列验证器,可用于确保您收到的数据有效。在这个例子中,我们正在使用proptypes.string(要求参数是字符串类型的)。如果为prop提供了无效值,则会在javascript控制台中显示警告。出于性能原因,proptypes仅在开发模式下进行检查。
验证器还有:
proptypes.array proptypes.bool proptypes.func proptypes.number proptypes.object proptypes.symbol proptypes.node proptypes.element proptypes.instanceof(类名) proptypes.oneof([可选值列表]) proptypes.oneoftype([proptype.string,....]):许多类型中的一种 proptypes.arrayof([]);可以是哪些类型 proptypes.objectof();具有特定类型的属性值的对象 链式操作表示此参数是必须的:eg:proptypes.array.isrequired表示此参数为一个数组类型的且必须存在
defaultprops:
defaultprops:为参数定义默认值
class greeting extends react.component { render() { return (
hello, {this.props.name}
); } } // specifies the default values for props: greeting.defaultprops = { name: 'stranger' }; // renders "hello, stranger": reactdom.render(为name定义默认值为字符串stranger当父组件没有向子组件传递name属性值时name为默认值。
所以类型检查也将适用于defaultprops。
上一篇: 一款纯css3实现的鼠标悬停动画按钮
下一篇: jQuery中英文数字截取数字