reactjs - React 组件的非必需 prop 是否应该位于 defaultProps 内

Question

首先，我已经检查了 React 的文档，但没有找到我的问题的答案。我在这里也做了同样的事情，但没有成功。

问题是:如果 React 组件中使用的 prop 不是必需的，那么它应该在 defaultProps 中吗？

  Component.propTypes = {
    getName: PropTypes.func,
    type: PropTypes.string.isRequired,
  };

  static defaultProps = {
    type: 'text',
    getName: () => {}, // should this be here at all ?!?
  };

我问这个是因为无论我把它放在这里还是不放，控制台中都不会出现错误。问题是，我在一些项目中看到人们使用 defaultProps 为组件提供一些后备值，而在我从事的其他项目中，在 defaultProps 中，人们仅将后备值设置为具有 isRequired 属性的字段，以便如果不将该 prop 传递给组件，请避免渲染错误或控制台错误。

Answer 1

如果该函数被传递给某个事件，即

<button onClick={props.callback} />

如果我会这样做，有时根本不需要 onClick(就像我们只想显示按钮而不单击操作)。那个时候我们不会传递它，如果有人点击我们会得到错误未定义不是一个函数因为回调是未定义

为了解决这个问题，我们要做的是

<button onClick={() => props.callback && props.callback()} />

但这效率不高，因为每次渲染都会创建一个新函数，这不是一个好的做法。

下一步是

function Button(props) {
    <button onClick={props.callback} />
}
props.defaultProps = {
    callback: () => {} // that will fallback if is not passed.
}

这将处理回退，并且看起来也很干净，而且是更好的方法。

如果我们将 prop 标记为必需，那么 eslint 无论如何都会抛出 this error