React学习笔记—组件复用
来源:互联网 发布:2017网络安全法答案 编辑:程序博客网 时间:2024/06/03 04:30
Prop 验证
随着应用不断变大,保证组件被正确使用变得非常有用。为此我们引入propTypes。React.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时,JavaScript 控制台会抛出警告。注意为了性能考虑,只在开发环境验证 propTypes。下面用例子来说明不同验证器的区别:
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!'); } } }, /* ... */});
默认 Prop 值
React 支持以声明式的方式来定义 props 的默认值。
var ComponentWithDefaultProps = React.createClass({ getDefaultProps: function() { return { value: 'default value' }; } /* ... */});
当父级没有传入 props 时,getDefaultProps() 可以保证 this.props.value 有默认值,注意 getDefaultProps 的结果会被 缓存。得益于此,你可以直接使用 props,而不必写手动编写一些重复或无意义的代码。
传递 Props:小技巧
有一些常用的 React 组件只是对 HTML 做简单扩展。通常,你想少写点代码来把传入组件的 props 复制到对应的 HTML 元素上。这时 JSX 的 spread 语法会帮到你:
var CheckLink = React.createClass({ render: function() { // 这样会把 CheckList 所有的 props 复制到 <a> return <a {...this.props}>{'√ '}{this.props.children}</a>; }});React.render( <CheckLink href="/checked.html"> Click here! </CheckLink>, document.getElementById('example'));单个子级React.PropTypes.element 可以限定只能有一个子级传入。var MyComponent = React.createClass({ propTypes: { children: React.PropTypes.element.isRequired }, render: function() { return ( <div> {this.props.children} // 有且仅有一个元素,否则会抛异常。 </div> ); }});
0 0
- React学习笔记—组件复用
- React学习笔记——如何创建React组件
- React学习笔记---创建组件
- react native学习笔记7——组件生命周期
- react学习笔记 item7 --- 组件的生命周期
- React Native学习笔记(3)--NavigatorIOS组件
- React Native学习笔记(3)--TextInput组件
- react 组件复用
- react native学习笔记9——引入第三方组件和react-navigation的使用
- [React网络整理]React之表单组件的学习笔记
- react-native组件笔记
- React 自定义组件与组件复用
- React学习 -- 组件
- react native学习笔记2——Hello World和组件构成简介
- react native学习笔记3——常见的基本组件简介
- react学习笔记(2)---组件的生命周期
- React学习笔记(6)---组件协同使用介绍
- React Native学习笔记(三)组件生命周期
- IOS函数可变参数
- [5-15] 打好基础,不忘初心
- 最速下降法
- BZOJ 2243 [SDOI2011]染色 树链剖分+LCA+区间合并线段树
- java 虚拟机之 boolean 类型
- React学习笔记—组件复用
- PLSQL练习
- Gym 100712G Heavy Coins
- 饿汉单例设计模式
- 跟着郝斌学数据结构(07)——队列(操作及应用)
- 子序列的和(subsequence)
- 机器学习算法一览表附opencv机器学习模块
- 毕设之Opencv批量霍夫圆检测
- 今天配置spring-mybites时遇到一个创建不了sqlSessionFactroy的问题