react 属性验证与默认属性

类组件属性验证与默认属性

通过static定义类的属性，属性验证可以引入模板自带的prop-types来进行类型判断，当然你也可以自己写一个类型判断的方法，然后对类的propTypes属性进行类型编写，'propTypes'这个属性名不可自定义。默认属性需要对类的defaultProps属性进行编写覆盖，'defaultProps'这个属性名不可自定义。

import ReactDOM from 'react-dom/client';
import React, { Component } from 'react'
import TypeVar from 'prop-types'

export default class Ikun extends Component {
    static propTypes={
        motto:TypeVar.string,
        isBoy:TypeVar.bool,
        name:TypeVar.string,
        detail:TypeVar.object
    }
    static defaultProps={
        motto:"我是有意的",
        isBoy:true,
        name:"九转大肠",
        detail:{hobby:'保留原有的味道',sex:'boy',age:'26'}
    }

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <div>{this.props.detail.hobby}</div>
            </div>
        )
    }
}

const obj={
    motto:"你干嘛~",
    isBoy:false,
    name:"菜某坤",
    detail:{hobby:'唱跳rap篮球',sex:'female',age:'87'}
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Ikun {...obj}/>
);

你也可以将其写在类的外部：

import ReactDOM from 'react-dom/client';
import React, { Component } from 'react'
import TypeVar from 'prop-types'


export default class Ikun extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <div>{this.props.detail.hobby}</div>
            </div>
        )
    }
}

Ikun.propTypes={
    motto:TypeVar.string,
    isBoy:TypeVar.bool,
    name:TypeVar.string,
    detail:TypeVar.object
}

Ikun.defaultProps={
    motto:"我是有意的",
    isBoy:true,
    name:"九转大肠",
    detail:{hobby:'保留原有的味道',sex:'boy',age:'26'}
}

const obj={
    motto:"你干嘛~",
    isBoy:false,
    name:"菜某坤",
    detail:{hobby:'唱跳rap篮球',sex:'female',age:'87'}
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Ikun {...obj}/>
);

函数式组件

函数式组件直接以实参传入形参的形式，与类组件相致，不过函数组件通过外部来进行属性验证与设置默认属性

import ReactDOM from 'react-dom/client';
import React from 'react'
import TypeVar from 'prop-types'

export default function Ikun(props) {
  return (
    <div>{props.detail.hobby}</div>
  )
}

Ikun.propTypes={
    motto:TypeVar.string,
    isBoy:TypeVar.bool,
    name:TypeVar.string,
    detail:TypeVar.object
}

Ikun.defaultProps={
    motto:"我是有意的",
    isBoy:true,
    name:"九转大肠",
    detail:{hobby:'保留原有的味道',sex:'boy',age:'26'}
}

const obj={
    motto:"你干嘛~",
    isBoy:false,
    name:"菜某坤",
    detail:{hobby:'唱跳rap篮球',sex:'female',age:'87'}
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Ikun {...obj}/>
);

react 属性验证与默认属性

猜你喜欢