Question

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

问题是：如果不需要在React组件中使用的道具，它应该在defaultProps中吗？

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

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

我之所以这样问是因为，如果我把它放在这里还是不把它放在控制台中，都没有错误。事实是，我看到在某些项目中人们正在使用defaultProps为组件提供一些后备值，而在我工作的其他项目中，在defaultProps中，人们仅将具有isRequired属性的字段的后备值放在如果它们没有将道具传递给组件，则避免呈现错误或控制台错误。

Answer 1

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

<button onClick={props.callback} />

如果我这样做，有时甚至根本不需要onClick（就像我们只是想显示按钮而没有点击动作）。那时我们不会通过它，如果有人单击我们会收到错误undefined is not a function，因为回调为undefined

要解决该问题，我们将要做的

<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

Answer 2

缺少defaultProps不会导致任何错误。这更像是一种好习惯。如果组件未收到期望的道具，则为该组件的所有道具保留defaultProps可以减少应用崩溃的机会。如果未正确处理该方案，则defaultProps会有所帮助。从开发人员的角度来看，通过查看组件的propTypes和defaultProps，开发人员将了解期望的类型和值。

React组件不需要的prop应该在defaultProps内部

2 个答案: