React - get React компонент из дочернего элемента DOM?

Я хотел бы узнать, какой компонент React связан с определенным элементом DOM.

Например, скажем, у меня есть div, и я обрабатываю все свое приложение с помощью React. Div должен быть предоставлен компонентом React, но какой?

Я знаю, что React поставляет метод getDOMNode", чтобы получить DOM node, связанный с компонентом React, но я хотел бы сделать напротив.

Возможно ли это?

Ответы

Ответ 1

Нет.

Центральное понятие в Реаге состоит в том, что на самом деле у вас нет элемента управления в DOM. Вместо этого ваш контроль - это функция factory. Что в DOM является текущим визуализацией элемента управления.

Если вам это действительно нужно, вы можете сохранить объект как глобальную переменную, ключи которой представляют собой строковые представления имен функций factory и значениями которых являются функции factory, а затем на вашем рендерируемом div, сохранить атрибут, содержащий имя функции factory.

Но, скорее всего, это вопрос проблемы XY (нужно X, видя путь с Y, а затем спрашивая, как сделать Y.) Вероятно, если вы объясните свою цель там лучший способ, который лучше подходит для React top- вниз концептуальная модель.

Вообще говоря, просить получить доступ к элементу управления от его рендеринга - это попросить получить доступ к SVG из его кэшированного рендеринга PNG. Это возможно, но обычно это красный флаг, что что-то еще концептуально неправильно.

Ответ 2

Вот что я использую, с 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;
};

И затем использовать его:

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

Ответ 3

Если ваш situtation требует получить элемент реакции из DOM node, вот подход, "Общайтесь через событие и перезвоните"

Вы должны запустить настраиваемое событие на элементе DOM и иметь прослушиватель событий для этого настраиваемого события в компоненте React. Это будет отображать элемент DOM для реагирования на компонент.