「React」props 默认值与类型检查

原创已于 2022-04-10 20:28:03 修改 · 478 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #react

于 2022-03-24 22:13:35 首次发布

React 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在React中，如何在函数式组件和类组件中设置props的默认值及进行类型检查。通过defaultProps设定props的默认值，利用propTypes进行props的类型验证。

函数式组件，props 默认值与类型检查

defaultProps -> props 默认值

function Main(props) {
    return (
        <div>{props.name}</div>
    )
}
Main.defaultProps = {
    name: '5k'
}

propTypes -> 对 props 进行类型检查

import PropTypes from 'prop-types'; // yarn add prop-types

function Main(props) {
    return (
        <div>{props.name}</div>
    )
}

Main.PropTyps = {
    name: PropTypes.String
}

function App() {
  return (
      {
    /*
      <Main name={6}/> 
       Warning: Failed prop type: Invalid prop `name` of type `number` supplied to `Main`, expected `string`.
      */
      }
     <Main name={'5k'} /> // yes
    
  )
}

类组件，props 默认值与类型检查

import PropTypes from 'prop-types';
import React from 'react'

class Main extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){
        return (
            <div>{this.props.name}</div>
        )
    }

    static defultProps = {
        name: '5k'
    }

    static propTypes = {
        name: PropTypes.string
    }
}

export default Main