属性默认值
- 通过一个静态属性 defaultProps 告知 react 属性默认值；
- 函数组件、类组件设置默认值：
JavaScriptJavaScript
export default function FuncDefault(props) { console.log(props);//已经完成了混合 return ( <div> a:{props.a}，b:{props.b}，c:{props.c} </div> ) } //属性默认值 FuncDefault.defaultProps = { a: 1, b: 2, c: 3 } ReactDOM.render(<FuncDefault a={10} b={20} />, document.getElementById("app"));export default class ClassDefault extends React.Component { static defaultProps = { a: 1, b: 2, c: 3 } constructor(props) { super(props); console.log(props); // 在构造函数之前就已经混合完成 } render() { return ( <div> a:{this.props.a}，b:{this.props.b}，c:{this.props.c} </div> ) } } // 属性默认值，与上面写法等价 // ClassDefault.defaultProps = { // a: 1, // b: 2, // c: 3 // } ReactDOM.render(<ClassDefault a={10} b={20} />, document.getElementById("app"));
类型检查
-
对于传递给子组件的数据，希望进行验证，如果项目中使用了 Flow 或者 TypeScript，那么直接就可以进行类型验证；也可以通过 prop-types 库来进行参数验证；
-
从 React v15.5 开始，React.PropTypes 已移入另一个 prop-types 包中；
JavaScriptJavaScriptPropTypes.any： // 任意类型 PropTypes.array： // 数组类型 PropTypes.bool： // 布尔类型 PropTypes.func： // 函数类型 PropTypes.number：// 数字类型 PropTypes.object：// 对象类型 PropTypes.string：// 字符串类型 PropTypes.symbol：// 符号类型 PropTypes.node：// 任何可以被渲染的内容，字符串、数字、React 元素 PropTypes.element：// react 元素 PropTypes.elementType：// react 元素类型 PropTypes.instanceOf(构造函数)：// 必须是指定构造函数的实例 PropTypes.oneOf([xxx, xxx])：// 枚举 PropTypes.oneOfType([xxx, xxx]); // 属性类型必须是数组中的其中一个 PropTypes.arrayOf(PropTypes.XXX)：// 必须是某一类型组成的数组 PropTypes.objectOf(PropTypes.XXX)：// 对象由某一类型的值组成 PropTypes.shape(对象): // 属性必须是对象，并且满足指定的对象要求 PropTypes.exact({...})：// 对象必须精确匹配传递的数据 // 自定义属性检查，如果有错误，返回错误对象即可 属性: function(props, propName, componentName) { //... }import PropTypes from "prop-types"; export default class ValidationComp extends Component { // 1. 先混合属性 static defaultProps = { b: false } // 2. 再调用相应的函数进行验证 static propTypes = { // a 属性必须是一个数字类型,并且必填 a: PropTypes.number.isRequired, // b 必须是一个 boolean 属性,并且必填 b: PropTypes.bool.isRequired, // onClick 必须是一个函数 onClick: PropTypes.func, // 1. 可以设置必填 2. 阵型保持整齐（所有属性都在该对象中） c: PropTypes.any, // d 必填，而且必须是一个可以渲染的内容，字符串、数字、React 元素 d: PropTypes.node.isRequired, // e 必须是一个 React 元素 e: PropTypes.element, // F 必须是一个组件类型 F: PropTypes.elementType, // g 必须是 A 的实例 g: PropTypes.instanceOf(A), // 属性必须是数组当中的一个 sex: PropTypes.oneOf(["男", "女"]), // 必须是某一类型组成的数组 h: PropTypes.arrayOf(PropTypes.number), // 每一个属性必须满足类型要求 i: PropTypes.objectOf(PropTypes.number), // 属性必须满足该对象的要求 j: PropTypes.shape({ // name必须是一个字符串，必填 name: PropTypes.string.isRequired, // age 必须是一个数字 age: PropTypes.number, address: PropTypes.shape({ province: PropTypes.string, city: PropTypes.string }) }), // 必须是某一类型组成的数组 k: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string.isRequired, age: PropTypes.number.isRequired })), // 属性类型必须是数组中的其中一个 m: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), // 自定义属性类型 score: function (props, propName, componentName) { console.log(props, propName, componentName); const val = props[propName]; // 必填 if (val === undefined || val === null) { return new Error(`invalid prop ${propName} in ${componentName}，${propName} is Required`); } // 该属性必须是一个数字 if (typeof val !== "number") { return new Error(`invalid prop ${propName} in ${componentName}，${propName} is not a number`); } const err = PropTypes.number.isRequired(props, propName, componentName); if (err) { return err; } // 并且取值范围是0~100 if (val < 0 || val > 100) { return new Error(`invalid prop ${propName} in ${componentName}，${propName} must is between 0 and 100`); } } } render() { const F = this.props.F; return ( <div> {this.props.a} <div> {this.props.d} <F /> </div> </div> ) } }
打赏作者
您的打赏是我前进的动力
微信
支付宝
React✍️ React中的 CSS
上一篇
评论
