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元素时？< / strong>

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

ANSWER

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

请参阅评论中的Shubham's Answer以获取更多信息...

Answer 1

根据 documentation ：

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

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

拥有proptypes的目的是让你在开发过程中知道某个组件收到了某些道具，并且可能需要它们中的一些，而不传递它们，你的代码就会破坏

您还可以使用Flow或TypeScript等JavaScript扩展程序来检查整个应用程序，从而提供更大的灵活性。有关更多详细信息，请参阅React文档中 Static TypeChecking 的此部分

另外考虑您是否应该检查本地DOM元素属性，如onClick和className，您还需要检查这些属性，因为它们不是自定义组件上的本机DOM元素，而是作为它的道具。查看 this 答案了解详情

Answer 2

恕我直言，为组件定义propTypes的重点是帮助您（和您的队友）记录您创建的组件API。这意味着通过读取propTypes，您可以知道要发送给组件的内容，以使其按预期工作。此外，DEV模式中的道具验证可以帮助您在有人为定义的道具传递不同的类型时。

因此，要回答您的问题，对于组件库，您应该使用该子弹并明确定义您的抽象。

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

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

2 个答案: