我应该在我的组件上定义标准的 React PropType 吗?

Question

我正在开发一个组件库，我想知道定义我知道会常用的propTypes是否是最佳实践，即使它们不是自定义道具。我已经在其他反应组件库(即 Material-UI)中看到过它，但我不确定为什么......

例如：

Button.propTypes = {
className: PropTypes.string,
onClick: PropTypes.func,
...
type: PropTypes.string.isRequired
};
const Button = (props) => <button {...props} />;

在这里，我显然希望包含type属性，因为它是我的实现的自定义属性，并且是此组件所必需的......但是另外两个呢？据我了解，像className这样的道具，onClick已经在大多数(所有？React的DOM元素。

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

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

---

答

经过一些测试，答案似乎是否定的，HTML 元素上的大多数本机属性都没有 React 提供的类型检查。有些有弃用和其他杂项警告，但总的来说，类型不会在本机 props 上强制执行(或建议)，因此您应该将它们包含在组件中。

请参阅评论中的舒巴姆的答案以获取更多信息...

Answer 1

根据文档：

随着应用的增长，你可以通过类型检查捕获很多错误。 ReactPropTypes导出一系列可用于 确保您收到的数据有效。

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

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

您还可以使用 JavaScript 扩展(如Flow或TypeScript)来对整个应用程序进行类型检查，这提供了更大的灵活性。阅读 React 文档中关于静态类型检查的部分以获取更多详细信息

还考虑到您是否应该检查本机 DOM 元素属性，如onClick和className，您还需要检查这些属性，因为它们不是自定义组件上的本机 DOM 元素，而是作为 props 传递给它。查看此答案以获取更多详细信息

Answer 2

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

因此，要回答您的问题，对于组件库，您应该接受该项目符号并显式定义您的抽象。

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