reactjs - 如果不需要 propType，为什么 ESLint 要为其提供默认 prop？

Question

const propTypes = {
  label: PropTypes.string,
};
const defaultProps = {};

为什么 ESLint 在不需要时要我们为 label 提供默认值？

(react/require-default-props)

我正在扩展airbnb

Answer 1

我已经得出结论，当您可以使用 ES6 默认值时，为组件定义没有任何意义。defaultProps

我发现的唯一好处（来自文档）：

defaultProps 优于代码中自定义默认逻辑的一个优点是 defaultProps 在 PropTypes 类型检查发生之前由 React 解析，因此类型检查也将应用于你的 defaultProps。无状态函数组件也是如此：默认函数参数的行为与 defaultProps 不同，因此仍首选使用 defaultProps。

所以有一些预期的好处，但我认为实现所需的冗长和时间defaultProps使它们不值得，除非你真的需要这个功能。

---

例外：

我们确实对一些组件进行了例外和定义OurComponent.defaultProps，但即便如此，我们也会有选择地这样做。我们只在使用 ES6 默认值的地方定义它们。我们没有为每个非必需道具定义默认值。

值得注意的是，eslint-plugin-react “推荐”配置中并未包含相关规则。

Answer 2

我有同样的问题。我用这个作为解决方案。

const propTypes = {
  lable: PropTypes.string,
};
const defaultProps = {
  lable: '',
};

Answer 3

工作 ReactJS 示例以消除eslint(react/require-default-props)：

const MyComponent extends React.Component {
  ...
}

MyComponent.defaultProps = {
  el: '',
  quantity: 0,
  arr: [],
  ...
}

MyComponent.propTypes = {
  el: PropTypes.string,
  quantity: PropTypes.number,
  arr: PropTypes.array,
  ...
}

export default MyComponent