React中Props类型校验和默认值的示例分析

这篇文章主要为大家展示了“React中Props类型校验和默认值的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“React中Props类型校验和默认值的示例分析”这篇文章吧。

一、props规则校验

安装 prop-types 包

$ npm install prop-types

导入 propTypes 对象

import propTypes from 'prop-types';

组件名.propTypes = {} 设置组件 传参规则

Comp.propTypes = {param: propTypes.array  // Comp组件 的 param 参数必须是 数组类型}

示例:

// props 类型校验规则import React from 'react';// 1. npm i prop-types// 2. 导入 propTypes 对象import PropTypes from "prop-types";function Son({list}) {    return (        <div>            {list.map(item => <p key={item}>{item}</p>)}        </div>    )}// 3. 组件名.propTypes = {} 给组件设置规则Son.PropTypes={    // 4. 各字段设置规则    list: PropTypes.array // Son的list参数必须是 数组形式}class App extends React.Component {    render() {        return (            <div>                <Son list="我企鹅亲子装"/>            </div>        )    }}export default App;

报错提示如下：

四种常见结构

• 常用类型：array、number、bool、string、func、object、symbol

• React元素类型：element

• 必填项：isRequired

• 特定的结构对象：shape({})

核心代码：

// 1.类型optionalFun: PropTypes.fun;// 2.必填项requiredFun: PropTypes.fun.isRequired;// 3. // 可以指定一个对象由特定的类型值组成optionalObjectWithShape: PropTypes.shape({    color: PropTypes.string,    fontSize: PropTypes.number}),

二、props默认值

1.函数式默认值

1.1 函数参数默认值（新版推荐）

示例：

import React from "react";// 1. 函数参数默认值function Son1({defaultTime = 10}) {    return (        <div>The timer is : {defaultTime}</div>    )}class App extends React.Component {    render() {        return (            <div>                <Son1 />            </div>        )    }}export default App;

1.2 defaultProps 设置默认值

function Son2({defaultTime}) {    return (        <div>The second timer is: {defaultTime}</div>    )}// 2. defaultProps 设置默认值Son2.defaultProps = {    defaultTime: 100}class App extends React.Component {    render() {        return (            <div>                <Son1 />                <Son2 />            </div>        )    }}

2.类式默认值

2.1 defaultProps

class Son3 extends React.Component {    render() {        return (            <div>The defaultTimer is : {this.props.defaultTime}</div>        )    }}// defaultProps 设置默认值Son3.defaultProps = {    defaultTime: 3333}

2.2 类静态属性声明

class Son4 extends React.Component {    static defaultProps ={        defaultTime: 66666    }    render() {        return (            <div>The defaultTimer is : {this.props.defaultTime}</div>        )    }}

完整示例

// props默认值import { func } from "prop-types";import React from "react";// 1.1 函数参数默认值function Son1({defaultTime = 10}) {    return (        <div>The timer is : {defaultTime}</div>    )}function Son2({defaultTime}) {    return (        <div>The second timer is: {defaultTime}</div>    )}// 1.2 defaultProps 设置默认值Son2.defaultProps = {    defaultTime: 100}class Son3 extends React.Component {    render() {        return (            <div>The defaultTimer is : {this.props.defaultTime}</div>        )    }}// 2.1 函数 defaultProps 设置默认值Son3.defaultProps = {    defaultTime: 3333}// 2.2 静态属性声明class Son4 extends React.Component {    static defaultProps ={        defaultTime: 66666    }    render() {        return (            <div>The defaultTimer is : {this.props.defaultTime}</div>        )    }}class App extends React.Component {    render() {        return (            <div>                <Son1 />                <Son2 />                <Son3 />                <Son4 />            </div>        )    }}export default App;

如图：

以上是“React中Props类型校验和默认值的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！