【06】react 之 PropsType
2024-08-25 20:08:03
React组件创建的时候,需要传入属性,我们可以使用使用PropTypes进行类型检查,您可以使用React.PropTypes在组件的道具上运行。
React.PropTypes.array React.PropTypes.bool React.PropTypes.func React.PropTypes.number React.PropTypes.object React.PropTypes.string React.PropTypes.symbol React.PropTypes.node React.PropTypes.element React.PropTypes.instanceOf() React.PropTypes.oneOf() React.PropTypes.oneOfType() React.PropTypes.arrayOf() React.PropTypes.objectOf() React.PropTypes.shape() React.PropTypes.any
默认情况下,验证器将props视为可选属性。您可以使用isRequired确保在未提供道具时显示警告。
React.createClass({ propTypes: { // 可以声明 prop 为指定的 JS 基本类型。默认 // 情况下,这些 prop 都是可传可不传的。 optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, // 所有可以被渲染的对象:数字, // 字符串,DOM 元素或包含这些类型的数组。 optionalNode: React.PropTypes.node, // React 元素 optionalElement: React.PropTypes.element, // 用 JS 的 instanceof 操作符声明 prop 为类的实例。 optionalMessage: React.PropTypes.instanceOf(Message), // 用 enum 来限制 prop 只接受指定的值。 optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), // 指定的多个对象类型中的一个 optionalUnion: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number, React.PropTypes.instanceOf(Message) ]), // 指定类型组成的数组 optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), // 指定类型的属性构成的对象 optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), // 特定形状参数的对象 optionalObjectWithShape: React.PropTypes.shape({ color: React.PropTypes.string, fontSize: React.PropTypes.number }), // 以后任意类型加上 `isRequired` 来使 prop 不可空。 requiredFunc: React.PropTypes.func.isRequired, // 不可空的任意类型 requiredAny: React.PropTypes.any.isRequired, // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接 // 使用 `console.warn` 或抛异常,因为这样 `oneOfType` 会失效。 customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error('Validation failed!'); } } }, /* ... */ });
或者
MyComponent.propTypes = { name:React.PropTypes.string };
es6
class InputControlES6 extends React.Component {
constructor(props) {
super(props);
// 设置 initial state
this.state = {
text: props.initialValue || 'placeholder'
};
// ES6 类中函数必须手动绑定
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({
text: event.target.value
});
console.log(this.state.text);
}
render() {
return (
<div>
Type something:
<input onChange={this.handleChange}
value={this.state.text} />
</div>
);
}
}
InputControlES6.propTypes = {
initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
initialValue: ''
};
ReactDOM.render(<InputControlES6/>,document.getElementById('example'))
最新文章
- HDU-1231 简单dp,连续子序列最大和,水
- html5 drag and drop
- 503 Service Temporarily Unavailable
- Codeforces 389B(十字模拟)
- 第十二届浙江省大学生程序设计大赛-May Day Holiday 分类: 比赛 2015-06-26 14:33 10人阅读 评论(0) 收藏
- timus 1109 Conference(二分图匹配)
- C++不能显式调用构造函数,会生成匿名对象,这点与Java完全不一样!
- MongoDB(四)——管理架构
- [转载]大道至简!!!从SAP HANA作为SAP加速器的方式,看ERP on HANA的春天
- 使用ARM模板部署自动扩展的Linux VMSS(1)
- MiniSD卡是什么
- hdu1075What Are You Talking About (字典树)
- Date()创建日期
- jade模板引擎简明用法
- Android App性能评测分析-流畅度篇
- numpy C语言源代码调试(二)
- 使用pip命令自动生成项目安装依赖清单
- Redis 3.2.4集群实战
- Gson的两种解析用法
- 机器学习—集成学习(XGBoost)
热门文章
- 解决: Intelij IDEA 创建WEB项目时没有Servlet的jar包
- 【SAM manacher 倍增】bzoj3676: [Apio2014]回文串
- TO_DATS() AS ABAP_DATE
- ElasticSearch部署问题
- 五、Shell 基本运算符
- Nginx 配置支持 WAF
- A1031 Hello World for U (20)(20 分)
- 在MAC下使用Robotframework+Selenium2【第一枪】robotframework安装步骤
- 图学java基础篇之并发
- Go语言之并发编程(二)