Phần tử DOM phản ứng PropTypes?

Question

Làm cách nào để đánh dấu thuộc tính là phải là phần tử DOM?

This page nói rằng PropTypes.element thực sự là một Phản ứng yếu tố, do đó tương đương cho DOM yếu tố là gì?

Answer 1

Bạn có thể kiểm tra nếu tài sản thông qua là thể hiện của Element:

Giao diện phần tử đại diện cho một đối tượng của một tài liệu. Giao diện này mô tả các phương thức và thuộc tính chung cho tất cả các loại phần tử. Các hành vi cụ thể được mô tả trong các giao diện kế thừa từ Element nhưng thêm chức năng bổ sung. Ví dụ, giao diện HTMLElement là giao diện cơ sở cho các phần tử HTML, trong khi giao diện SVGElement là cơ sở cho tất cả các phần tử 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

Ví dụ với một thành phần danh sách:

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

trình cho tôi.