React学习笔记—组件复用
2016-05-15 21:37
691 查看
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> ); } });
相关文章推荐
- React基础入门
- React-Native系列Android——通信数据模型分析
- React Native从入门到放弃
- ReactNative – 组件的生命周期
- React源码剖析系列 - 不可思议的react diff
- reactor和proactor模式
- I/O并发模式:Reactor模式与Proactor模式 总价
- React.js中的表单
- ReactJs中的状态机State
- 【REACT NATIVE 系列教程之四】刷新组件RENDER(重新渲染)的三种方式详解
- 【REACT NATIVE 系列教程之三】函数绑定与FLEXBOX是用好REACT的基础
- ReactJs中的this.props.children总结
- Windows下搭建React Native Android开发环境
- react native学习笔记
- React中input checked的使用
- react-0.14.7
- 使用 React和webpack开发和打包发布
- react-router学习笔记之入门
- What is a nuclear reactor?(核反应堆是什么)
- IO复用(Reactor模式和Preactor模式)——用epoll来提高服务器并发能力