React PropTypes Элемент DOM?

Question

Как пометить свойство как элемент DOM?

This page говорит, что PropTypes.element фактически Реагировать элемент, так что эквивалент для DOM элемента?

Answer 1

Вы можете проверить, если передаваемое свойство экземпляр 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>

Answer 2

Например с компонентом списка:

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

Работы для меня.