如何使用箭头函数组件（rafce）定义defaultProps？

Question

所以我很好奇是否有一个选项可以声明 defaultProps with react arrow function component?

我只找到了基于 class 的组件和功能组件的解决方案，这些组件在官方 React 文档中由 word function 声明。

class 基于：

class Greeting extends React.Component {
static defaultProps = {
    name: 'Meggie'
  }

  render() {
    return (
      <div>Hello, {this.props.name}</div>
    )
  }
}

基于函数：

import PropTypes from 'prop-types'
function HelloWorldComponent({ name }) {
  return (
    <div>Hello, {name}</div>
  )
}

HelloWorldComponent.defaultProps = {
  name: "Meggie"
}

export default HelloWorldComponent

Answer 1

一个好的方法是在函数参数中定义默认属性，例如：

function HelloWorldComponent({ name = 'Meggie' }) { ... }

或使用箭头函数:

const HelloWorldComponent = ({ name = 'Meggie' }) => { ... }

如何使用箭头函数组件（rafce）定义defaultProps？

How to define defaultProps using arrow function component (rafce)?

javascript

reactjs

components

react-props

arrow-functions