React PropTypes的DOM元素？

Question

如何将属性标记为必须是DOM元素？

这个页面说PropTypes.element实际上是一个 React 元素，那么对应的DOM元素是什么呢？

- mpen

---

你的意思是DOM元素的类型吗？检查特定类型可以使用自定义prop检查器针对 someNode.constructor.name 进行。 - Matthew Herbst

@MatthewHerbst 不，我的意思是任何DOM元素。div，span，input，无论什么。 - mpen

React.PropTypes.node? - elmeister

@vijayst 即使它们是通过document.getElementById获取的，或者是通过document.createElement创建的，并且不是通过React.createElement("input")创建的？ - mpen

node 的范围太宽泛了，它包含数字、字符串和数组。 - mpen

Answer 1

PropTypes.instanceOf(Element)

对我来说有效。您还可以添加isRequired：

PropTypes.instanceOf(Element).isRequired

- Gregory Bolkenstijn

---

有没有Node.js的等效替代品？ - Greg

您现在可以使用PropTypes.elementType，具体说明可以参考这里：https://dev59.com/0FYN5IYBdhLWcg3wEEnU#51127130 - Pandaiolo

将这个答案扩展一下，包括如何使用div和导入的组件进行操作的区别，可能会让你获得额外的声望。只是说一下。 - Erik Grosskurth

如果你使用 SSR（服务器端渲染）你应该避免使用这个，因为在Node.js中Element会变成未定义的。如果你从生产构建中剥离你的PropTypes，那么在此方面就没问题了。但即使如此，在开发构建中仍然会抛出一个错误。 - Carl von Buelow

@Pandaiolo PropTypes.elementType 不适用于原生 DOM 元素实例。请参见此处：https://github.com/facebook/prop-types/issues/334 和此处：https://github.com/facebook/prop-types/pull/211。 - sydd

@sydd 感谢您指出这一点。这条评论是来自2019年，无法编辑，_但是_，我提到的答案在那个时候已经更新，正如我对svnn的评论所提到的，您也做出了反应。如果您看到任何过时的内容，请告诉我。 - Pandaiolo

Answer 2

您可以检查传递的属性是否是Element的实例：

Element接口表示文档的对象。该接口描述了所有类型元素的公共方法和属性。特定行为在继承自Element但添加附加功能的接口中描述。例如，HTMLElement接口是HTML元素的基本接口，而SVGElement接口是所有SVG元素的基础。

class Some extends React.Component {
  render() {
    return (
      <div> Hello </div>
    );
  }
}

const validateDOMElem = (props, propName, componentName) => {
  if (props[propName] instanceof Element === false) {
    return new Error(
      'Invalid prop `' + propName + '` supplied to' +
      ' `' + componentName + '`. Validation failed.'
    );
  }
}

Some.propTypes = {
  htmlElem: validateDOMElem,
};

const para = document.getElementById('para');

ReactDOM.render(<Some htmlElem={para} />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>

<div id="app"></div>
<p id="para"></p>

- Hardy

---

可以不创建自定义验证器，而使用PropTypes.instanceOf(Element)。 - Michael Radionov

Answer 3

例如，使用列表组件：

MyList.propTypes = {
  children: PropTypes.instanceOf(<li></li>),
}

这对我来说没问题。

- rvantonisse

---

如果我使用此代码，会收到警告 Failed prop type: Right-hand side of 'instanceof' is not callable。 这意味着在2019年以后不再起作用了吗？请帮我翻译一下。 - micnil

Answer 4

PropTypes.instanceOf(Element)在服务器端渲染时不起作用，因为会出现ReferenceError: Element is not defined

建议改用PropTypes.object

- HydraOrc