使用prop-types实施特定的HTML元素类型？

Question

当一个组件需要特定类型的HTML元素（不是React类）的支柱，即HTMLSpanElement时，我希望组件的propTypes定义强制执行。

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

但是ku zxsw。

Answer 1

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

here

首先要注意的是，当你将孩子传递给

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
};

时，你传递的JSX（无论是App还是<span>Hello World</span>）将显示在你的自定义验证器中，并且可以找到<MyComponent />。这就是你在验证器的第一行中看到的props[propName]。

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

这应该足以让你开始。我分叉你的代码沙箱，然后在我的示例代码中添加测试。你可以通过改变传递给string的孩子来玩。例如，尝试使用快速制作的App并测试prop类型验证器如何对此作出反应。

<MyComponent>

---

以下是PropTypes和自定义验证器的一些有用资源：

• 
• ReactJS Documentation on typechecking

Answer 2

以下Alvin的评论在没有自定义验证器的情况下对我有用：

Article on Medium.com on Custom PropType Validation

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