PropTypes DOM 요소를 반응하시겠습니까?

PropTypes DOM 요소를 반응하시겠습니까?

속성을 DOM 요소로 표시하려면 어떻게 해야 하는가?

이 페이지에는 다음과 같이 적혀 있다.PropTypes.element실제로 반응 요소인데, DOM 요소와 동등한 것은 무엇인가?

PropTypes.instanceOf(Element)

날 위해 일하는 거야IsRequired를 추가할 수도 있다.

PropTypes.instanceOf(Element).isRequired

전달된 속성이 의 인스턴스인지 확인할 수 있다.Element:

Element 인터페이스는 문서의 오브젝트를 나타낸다.이 인터페이스는 모든 종류의 요소에 공통되는 방법과 속성을 설명한다.특정 동작은 요소에서 이어받지만 추가 기능을 추가하는 인터페이스에서 설명된다.예를 들어 HTMLlement 인터페이스는 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>

예를 들어 목록 구성 요소:

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

날 위해 일한다.

PropTypes.instanceOf(Element)다음 이유로 인해 서버 측 렌더에는 작동하지 않음ReferenceError: Element is not defined

사용 제안PropTypes.object대신에

참조URL: https://stackoverflow.com/questions/39401676/react-proptypes-dom-element