我应该在我的组件上定义标准的 React PropTypes 吗？

Question

我正在开发一个组件库，我想知道定义propTypes 是否是最佳实践，我知道即使它们是不是自定义道具，也会被普遍使用。我已经在其他 react 组件库（即 Material-UI）中看到过它，但我不确定为什么......

例如：

Button.propTypes = {
    className: PropTypes.string,
    onClick: PropTypes.func,
    ...
    type: PropTypes.string.isRequired
};

const Button = (props) => <button {...props} />;

在这里，我显然想包含 type 属性，因为它是我的实现的自定义属性并且是该组件所必需的……但是其他两个呢？据我了解，像 className、onClick 这样的 props 已经被 React 定义在大多数（全部？）DOM 元素上。

考虑到这一点，当 onClick (click()) 和 className 等原生 DOM 元素属性传递到 HTML 元素时，React 是否会对它们进行类型检查？

如果是这样，如果它们是可选的，将它们包含在我的父组件的 propTypes 对象中似乎是多余的。

---

回答

在做了一些测试之后，答案似乎是否，HTML 元素的大多数原生属性都没有 React 提供的类型检查。有些有弃用和其他杂项。警告，但总的来说，原生道具上没有强制（或建议）类型，因此您应该将它们包含在您的组件中。

有关更多信息，请参阅 cmets 中的Shubham's Answer...

Answer 1

根据documentation：

随着应用程序的增长，您可以通过类型检查发现很多错误。 React PropTypes 导出了一系列验证器，可用于 确保您收到的数据有效。

当为某个道具提供了无效值时，将显示警告 在 JavaScript 控制台中。出于性能原因，propTypes 是 仅在开发模式下检查。

拥有 proptypes 的目的是让您在开发过程中知道组件接收了某些 props，其中一些可能是必需的，如果不传递它们，您的代码将会中断

您还可以使用 Flow 或 TypeScript 等 JavaScript 扩展来对整个应用程序进行类型检查，从而提供更大的灵活性。阅读 React 文档中关于 Static TypeChecking 的这一部分了解更多详情

另外考虑到您询问是否应该检查原生 DOM 元素属性，例如 onClick 和 className，您还需要检查这些属性，因为它们不是自定义组件上的原生 DOM 元素，而是作为道具传递给它。查看this回答了解更多详情

Answer 2

恕我直言，为组件定义 propTypes 的全部意义在于帮助您（和您的队友）记录您创建的组件 API。这意味着通过阅读 propTypes，您可以知道要向组件发送什么以使其按预期工作。当有人为定义的道具传递不同类型时，DEV 模式下的道具验证也可以帮助您。

因此，要回答您的问题，对于组件库，您应该采用该项目符号并明确定义您的抽象。

PS：你总是可以传递比在 PropTypes 中定义的更多的道具，但是你可以合并更好的模式。