Question

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

This page说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>),
}

适合我。

React PropTypes DOM元素？

3 个答案: