web-dev-qa-db-fra.com

React Élément DOM PropTypes?

Comment marquer une propriété comme devant être un élément DOM?

Cette page dit que PropTypes.element est en fait un élément React , alors quel est l'équivalent pour [~ # ~] dom [~ # ~ ] élément?

reactjsreact-proptypes
22
mpen
PropTypes.instanceOf(Element)

Travaille pour moi. Vous pouvez également ajouter isRequired:

PropTypes.instanceOf(Element).isRequired
23
Gregory Bolkenstijn

Vous pouvez vérifier si la propriété passée est une instance de Element:

L'interface Element représente un objet d'un document. Cette interface décrit les méthodes et propriétés communes à toutes sortes d'éléments. Des comportements spécifiques sont décrits dans les interfaces qui héritent d'Element mais ajoutent des fonctionnalités supplémentaires. Par exemple, l'interface HTMLElement est l'interface de base pour les éléments HTML, tandis que l'interface SVGElement est la base de tous les éléments 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>
7
Hardy

Par exemple avec un composant de liste:

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

Travaille pour moi.

6
rvantonisse