通过一个静态属性defaultProps告知react属性默认值
//FuncDefault.js
import React from 'react'
export default function FuncDefault(props) {
return (
<div>
a: { props.a },b: { props.b },c: { props.c }
</div>
)
}
//属性默认值
FuncDefault.defaultProps = {
a: 1,
b: 2,
c: 3
}
import React, { Component } from 'react'
import FuncDefault from './FuncDefault'
export default class Input extends Component {
render() {
return (
<div>
{/* 注意我们没有传入属性值哦 */}
<FuncDefault />
</div>
)
}
}
然后组件就会默认调用我们设置的默认属性值。
如果我们又传入属性值，有设置默认属性值呢？
import React from 'react'
export default function FuncDefault(props) {
console.log(props);// 给函数组件之前，props已经与defaultProps完成了混合
return (
<div>
a: { props.a },b: { props.b },c: { props.c }
</div>
)
}
//属性默认值
FuncDefault.defaultProps = {
a: 1,
b: 2,
c: 3
}
//ClassDefault.js
import React, { Component } from 'react'
export default class ClassDefault extends Component {
// he函数组件一样，在调用组件时props已经混合完成
constructor(props) {
console.log(props);
super(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
}
import React, { Component } from 'react'
import ClassDefault from './ClassDefault'
export default class Input extends Component {
render() {
return (
<div>
{/* 注意我们没有传入属性值哦 */}
<ClassDefault a={4} b={5} />
</div>
)
}
}
此外，类组件的默认属性值，也可以直接使用静态成员的方式书写。
export default class ClassDefault extends Component {
// he函数组件一样，在调用组件时props已经混合完成
constructor(props) {
console.log(props);
super(props);
}
static defaultProps = {
a: 1,
b: 2,
c: 3
}
render() {
return (
<div>
a: { this.props.a},b: { this.props.b},c: { this.props.c}
</div>
)
}
}
使用库：prop-types
对组件使用静态属性propTypes告知react如何检查属性
// ValidationComp.js
import React, { Component } from 'react'
import PropTypes from 'prop-types';
export default class ValidationComp extends Component {
static propTypes = {
a: PropTypes.number,
b: PropTypes.bool
}
render() {
return (
<div>
a: { this.props.a },b: { this.props.b }
</div>
)
}
}
import React, { Component } from 'react'
import ValidationComp from './ValidationComp'
export default class Input extends Component {
render() {
return (
<div>
<ValidationComp a={4} b={'true'} />
</div>
)
}
}
由于我们b属性开启了类型验证为布尔，此时我们传入的是字符，虽然页面上成功显示，单控制台会进行报错。
也可以使用jsx语法，直接传入b即可，默认为true。
import React, { Component } from 'react'
import ValidationComp from './ValidationComp'
export default class Input extends Component {
render() {
return (
<div>
{/* 注意我们没有传入属性值哦 */}
<ValidationComp a={4} b />
</div>
)
}
}
也可以不传入b值，使用属性默认值。
export default class ValidationComp extends Component {
static defaultProps = {
b: false
}
static propTypes = {
a: PropTypes.number,
b: PropTypes.bool
}
render() {
return (
<div>
a: { this.props.a },b: { this.props.b }
</div>
)
}
}
通过这里我们也可以发现，仍然是在调用组件时，属性值和默认属性值已经完成混合，所以此时属性类型验证才能知道b的值类型为布尔
在之前的学习中我们知道，哪怕我么适应了b属性值，但b属性值不传不设置默认值，react不会有报错提示。
import React, { Component } from 'react'
import PropTypes from 'prop-types';
export default class ValidationComp extends Component {
// static defaultProps = {
// b: false
// }
// static propTypes = {
// a: PropTypes.number,
// b: PropTypes.bool
// }
render() {
return (
<div>
a: { this.props.a },b: { this.props.b }
</div>
)
}
}
一旦我们对属性类型验证开启必传验证后。
export default class ValidationComp extends Component {
// static defaultProps = {
// b: false
// }
static propTypes = {
a: PropTypes.number,
b: PropTypes.bool.isRequired
}
render() {
return (
<div>
a: { this.props.a },b: { this.props.b }
</div>
)
}
}
此时系统会进行提示报错，b必须传入。
由于react的验证方法很多，但是常用的往往就那几个，剩下的就不再一一详细举例了。
博主直接将其他的验证方法直接附上。
import React, { Component } from 'react'
import PropTypes from 'prop-types'
export class A {}
export default class ValidationComp extends Component {
static defaultProps = {
b: false
}
static propTypes = {
a: PropTypes.number.isRequired, //a属性必须是一个数字类型,并且必填
b: PropTypes.bool.isRequired, //b必须是一个bool属性,并且必填
onClick: PropTypes.func, //onClick必须是一个函数
c: PropTypes.any, //1. 可以设置必填 2. 阵型保持整齐（所有属性都在该对象中）
d: PropTypes.node.isRequired, //d必填，而且必须是一个可以渲染的内容，字符串、数字、React元素 d={<Comp />}
e: PropTypes.element, //e必须是一个React元素 e={<Comp />}
F: PropTypes.elementType, //F必须是一个组件类型 F={Comp}
g: PropTypes.instanceOf(A), //g必须是A的实例，普通对象也不行 g={new A}
sex: PropTypes.oneOf(["男", "女"]), //属性必须是数组当中的一个，非'男'即'女' sex={'男'}
h: PropTypes.arrayOf(PropTypes.number), //数组的每一项必须满足类型要求（可以使空数组） n={[1,2,3]}
i: PropTypes.objectOf(PropTypes.number), //每一个属性必须满足类型要求 i={{a: 1}}
j: PropTypes.shape({ //属性必须满足该对象的要求，相当于组合使用
name: PropTypes.string.isRequired, //name必须是一个字符串，必填
age: PropTypes.number, //age必须是一个数字
address: PropTypes.shape({// 如果继续嵌套函数，别忘了用shape
province: PropTypes.string,
city: PropTypes.string
})
}),
k: PropTypes.arrayOf(PropTypes.shape({// 如果想验证数组每一个元素，可以灵活嵌套使用
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired
})),
l: PropTypes.exact({...}),// 对象必须精确匹配传递的数据，不能设置无效验证且不传属性
m: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),// 数组元素的类型必须为其中一个，和oneOf类似
}
render() {
return (
<div>
a: { this.props.a },b: { this.props.b }
</div>
)
}
}
如果以上验证方法仍不能对你的属性进行验证，也可以自定义验证。
自定义属性检查，如果有错误，返回错误对象即可
// ValidationComp.js
import React, { Component } from 'react'
import PropTypes from 'prop-types'
export default class ValidationComp extends Component {
static defaultProps = {
b: false
}
static propTypes = {
a: PropTypes.number.isRequired, //a属性必须是一个数字类型,并且必填
b: PropTypes.bool, //b必须是一个bool属性,并且必填
fn: function (props, propName, componentName) {
console.log(props, propName, componentName);
const val = props[propName];
if(typeof val === 'string'){
return new Error(`invalid prop ${propName} in ${componentName}，${propName} is String`);
}
}
}
render() {
return (
<div>
a: { this.props.a },b: { this.props.b },fn: { this.props.fn }
</div>
)
}
}
import React, { Component } from 'react'
import ValidationComp from './ValidationComp'
export default class Input extends Component {
render() {
return (
<div>
<ValidationComp a={4} b={true} fn={'自定义验证'} />
</div>
)
}
}
