React PropTypes DOM元素？

Question

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

这个页面说这PropTypes.element实际上是一个React元素,那么DOM元素的等价物是什么？

Answer 1

PropTypes.instanceOf(Element)

为我工作.您还可以添加isRequired:

PropTypes.instanceOf(Element).isRequired

Answer 2

您可以检查传递的属性是否为以下实例Element:

Element接口表示Document的对象.此接口描述了各种元素共有的方法和属性.在继承自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>

Answer 3

例如,使用列表组件:

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

适合我.

Answer 4

PropTypes.instanceOf(Element)不适用于服务器端渲染，因为ReferenceError: Element is not defined

建议PropTypes.object改用