web-dev-qa-db-fra.com

React - get React component from a child DOM element?

J'aimerais pouvoir savoir quel composant React est associé à un certain élément DOM.

Par exemple, disons que j'ai un div et que je rend l'intégralité de mon application à l'aide de React. Le div doit être rendu par un composant React - mais lequel?

Je sais que React fournit la méthode " getDOMNode " pour obtenir le nœud DOM associé à un composant React, mais je aiment faire le contraire.

Est-ce possible?

javascriptdomreactjs
34
Brad Parks

Non.

Un concept central dans React est que vous n'avez pas réellement de contrôle dans le DOM. Au lieu de cela, votre contrôle est cette fonction d'usine. Ce qui se trouve dans le DOM est le rendu actuel du contrôle.

Si vous en avez réellement besoin, vous pouvez conserver un objet en tant que variable globale, dont les clés sont les représentations sous forme de chaîne des noms des fonctions d'usine, et dont les valeurs sont les fonctions d'usine, puis sur votre div rendable, conservez un attribut contenant le nom de la fonction d'usine.

Mais il s'agit probablement du problème XY (avoir besoin de X, voir un chemin avec Y, puis demander comment faire Y.) Probablement, si vous expliquez votre objectif, il existe un meilleur moyen qui correspond mieux au modèle conceptuel descendant de React. .

De manière générale, demander à accéder au contrôle à partir de son rendu, c'est comme demander à accéder à un SVG à partir de son rendu PNG mis en cache. C'est possible, mais c'est généralement un drapeau rouge que quelque chose d'autre est conceptuellement faux.

17
John Haugeland

Voici ce que j'utilise, avec React 15.3.0:

window.FindReact = function(dom) {
    for (var key in dom) {
        if (key.startsWith("__reactInternalInstance$")) {
            var compInternals = dom[key]._currentElement;
            var compWrapper = compInternals._owner;
            var comp = compWrapper._instance;
            return comp;
        }
    }
    return null;
};

Et puis pour l'utiliser:

var someElement = document.getElementById("someElement");
FindReact(someElement).setState({test1: test2});
9
Venryx

Si votre situation nécessite d'obtenir un élément react à partir du nœud DOM, voici une approche, "Communiquer via un événement et rappeler"

Vous devez déclencher un événement personnalisé sur l'élément DOM et avoir un écouteur d'événement pour cet événement personnalisé dans le composant React. Cela mappera l'élément DOM au composant React.

6
selvan