如何声明 defaultProps

在 React 中，我们可以通过给组件的 props 设置默认值来确保组件不会由于没有传入某些 props 而出现错误。声明 defaultProps 可以确保组件即使没有传入某些 props ，也能正常渲染。

基本语法

声明 defaultProps 非常简单，只需在组件中定义一个静态属性 defaultProps，将要设置的默认值作为这个属性的值即可。

class MyComponent extends React.Component {
  static defaultProps = {
    prop1: 'default value',
    prop2: 123
  }

  // ...
}

propTypes 与 defaultProps

在声明 defaultProps 时，通常会与 propTypes 一起使用。propTypes 是用来验证传入的 props 是否符合预期，而 defaultProps 则是用来设置默认值以避免出现错误。这两者的常用语法如下：

import PropTypes from 'prop-types'

class MyComponent extends React.Component {
  static propTypes = {
    prop1: PropTypes.string,
    prop2: PropTypes.number.isRequired
  }

  static defaultProps = {
    prop1: 'default value',
    prop2: 123
  }

  // ...
}

defaultProps 和纯函数组件

对于纯函数组件，可以通过参数默认值来达到与 defaultProps 相同的效果，例如：

function MyComponent(props) {
  const { prop1 = 'default value', prop2 = 123 } = props

  // ...
}

小结

• 在 React 中，声明 defaultProps 可以确保组件即使没有传入某些 props ，也能正常渲染。
• defaultProps 的语法是在组件中定义一个静态属性 defaultProps，设置默认值。
• propTypes 与 defaultProps 通常一起使用。
• 对于纯函数组件，可以使用参数默认值作为 defaultProps 的替代方案。