web-dev-qa-db-fra.com

Comment détecter un composant React par rapport à un élément React?

React.isValidElement teste vrai pour les composants React ainsi que pour les éléments React. Comment pourrais-je tester, en particulier, qu'un objet est un composant React? Actuellement, je le fais en testant typeof obj.type === 'function', mais j'espère qu'il existe un meilleur moyen.

javascriptreactjs
45
jedmao
ReactComponent.prototype.isReactComponent = {};

33 de /node_modules/react/lib/ReactComponent.js

Installez à l'aide de npm. À ce stade, il n’existe aucune méthode directe permettant de vérifier sa validité. Ce que vous faites est correct.

12
Anvesh Checka

Si vous voulez vraiment taper check pour 

  • composant vs élément

  • classe vs composant fonctionnel

  • DOM vs élément composite

Vous pouvez essayer quelque chose comme ça.

function isClassComponent(component) {
    return (
        typeof component === 'function' && 
        !!component.prototype.isReactComponent
    ) ? true : false
}

function isFunctionComponent(component) {
    return (
        typeof component === 'function' && 
        String(component).includes('return React.createElement')
    ) ? true : false;
}

function isReactComponent(component) {
    return (
        isClassComponent(component) || 
        isFunctionComponent(component)
    ) ? true : false;
}

function isElement(element) {
    return React.isValidElement(element);
}

function isDOMTypeElement(element) {
    return isElement(element) && typeof element.type === 'string';
}

function isCompositeTypeElement(element) {
    return isElement(element) && typeof element.type === 'function';
}

UTILISATION

// CLASS BASED COMPONENT
class Foo extends React.Component {
  render(){
      return <h1>Hello</h1>;
  }
}

const foo = <Foo />;

//FUNCTIONAL COMPONENT
function Bar (props) { return <h1>World</h1> }
const bar = <Bar />;

// REACT ELEMENT
const header = <h1>Title</h1>;

// CHECK
isReactComponent(Foo); // true
isClassComponent(Foo); // true
isFunctionComponent(Foo); // false
isElement(Foo); // false

isReactComponent(<Foo />) // false
isElement(<Foo />) // true
isDOMTypeElement(<Foo />) // false
isCompositeTypeElement(<Foo />) // true

isReactComponent(Bar); // true
isClassComponent(Bar); // false
isFunctionComponent(Bar); // true
isElement(Bar); // false

isReactComponent(<Bar />) // false
isElement(<Bar />) // true
isDOMTypeElement(<Bar />) // false
isCompositeTypeElement(<Bar />) // true

isReactComponent(header); // false
isElement(header); // true
isDOMTypeElement(header) // true
isCompositeTypeElement(header) // false

Exemple Codepen

36
Emanual Jade

En plus de la réponse @EmanualJade, vous pouvez l’utiliser pour vérifier si une variable est un function component

React.isValidElement(Component())

Comme l'a souligné @ Leonardo, certains compilateurs peuvent provoquer l'échec de cette opération:

String(component).includes('return React.createElement')
8
Christopher Regner

La solution la plus simple est:

React.isValidElement(element)
1
Jackkobec

class Test extends React.Component {}

console.log(!!Test.prototype.isReactComponent);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

0
Razzwan