视觉网络网站,wap卖料建站系统,wordpress 鼠标移动到标题会显示图片,企业一般用哪个erp系统非typescript环境下#xff0c;当我们在封装组件的时候#xff0c;接受props时传入的内容#xff0c;需要做类型检测#xff0c;那我们可以用props校验进行类型的检查。
props校验允许在创建组件的时候#xff0c;就约定props的格式、类型等
实现步骤#xff1a; 导入 …非typescript环境下当我们在封装组件的时候接受props时传入的内容需要做类型检测那我们可以用props校验进行类型的检查。
props校验允许在创建组件的时候就约定props的格式、类型等
实现步骤 导入 prop-types 包 使用组件名.propTypes {} 来给组件的props添加校验规则 校验规则通过 PropTypes 对象来指定 如果props想设置默认值可以通过defaultProps去设置 常见类型array、bool、func、number、object、stringReact元素类型element必填项isRequired特定结构的对象shape({})
import PropTypes from prop-types
function App(props) {return (h1{props.colors}/h1h1{props.num}/h1h1{props.name}/h1)
}
// 这里约定了属性时什么类型不然类型检测不通过会清晰报错
App.propTypes {colors: PropTypes.array,num:PropTypes.number,name:PropTypes.string,
}// 设置默认值
App.defaultProps {colors: [蓝色]nun:18,name:hyy
}###React—— 类的-static 校验简写上面的校验 ES6新出的class可以帮组我们进行类型校验我们可以定义一个类给定其类型即默认值。 实例成员: 通过实例调用的属性或者方法叫做实例成员属性或者方法 静态成员通过类或者构造函数本身才能访问的属性或者方法 static可以把实例成员设置未静态成员
static的作用简写校验、简写默认值
import PropTypes from prop-types
function App(props) {return (h1{props.colors}/h1h1{props.num}/h1h1{props.name}/h1)// 这里约定了属性时什么类型不然类型检测不通过会清晰报错
static propTypes {colors: PropTypes.array,num:PropTypes.number,name:PropTypes.string,
}// 设置默认值
static defaultProps {colors: [蓝色]nun:18,name:hyy
}
}
