Question

当组件期望某种类型的HTML元素（而不是React类）的prop，即HTMLSpanElement时，我希望组件的propTypes定义强制执行。

我尝试过尝试PropTypes.instanceOf(HTMLSpanElement)和oneOf([HTMLSpanElement])，尽管该元素是已定义构造函数的实例，但似乎没有任何作用-Prop类型声称它是一个对象。

演示here。

Answer 1

您可以编写一个自定义的PropType验证器，该验证器检查prop子代，以确保它只是基本的HTML元素。您的代码可能如下所示：

const htmlElementPropType = (props, propName, componentName) => {
  const value = props[propName]
  const validHTMLElementTags = ['div', 'span', 'a', 'p', 'h1', 'h2', 'h3', 'h4']
  if ((typeof value.type != 'string') ||
      validHTMLElementTags.indexOf(value.type.toLowerCase()) === -1) {
    return new TypeError(`Invalid HTML Element Prop Value: ${propName} in ${componentName}`)
  }
}

App.propTypes = {
  children: htmlElementPropType
};

首先要注意的是，当您将孩子传递给App时，所传递的JSX（无论是<span>Hello World</span>还是<MyComponent />）将显示在自定义验证器中并可以找到props[propName]。这就是验证器第一行中显示为value的内容。

您要检查typeof value.type。如果等于function，那么我们正在处理一个React组件；但是如果是string，那么我们正在处理一个内置组件（一个基本的HTML元素）。因此，您只需检查typeof value.type以确保它是string就足够了。如果您想要其他限制（例如，仅允许某些 HTML元素），则可以添加这些限制，如上面的代码示例所示。

这应该足以让您入门。我分叉了您的代码沙箱，然后将其添加到示例代码中进行测试。您可以通过更改传递给App的子级来玩耍。例如，尝试使用快速制作的<MyComponent>并测试道具类型验证器对此的反应。

以下是有关PropType和自定义验证程序的一些有用资源：

Answer 2

以下是Alvin的评论，这是在没有自定义验证程序的情况下对我有效的方法：

videoTag: PropTypes.shape({
  tagName: PropTypes.oneOf(['VIDEO']),
})

仍然不确定这是否是最简单的方法。

使用prop-types强制执行特定的HTML元素类型？

2 个答案: