React - 하위 DOM 요소에서 React 구성 요소를 가져오시겠습니까?

React - 하위 DOM 요소에서 React 구성 요소를 가져오시겠습니까?

특정 DOM 요소와 관련된 React 컴포넌트가 무엇인지 알고 싶습니다.

예를 들어, Div가 있고 React를 사용하여 전체 응용 프로그램을 렌더링한다고 가정합니다.div는 React 구성 요소에 의해 렌더링되어야 합니다. 하지만 어떤 구성 요소가 렌더링됩니까?

React가 React 컴포넌트와 관련된 DOM 노드를 취득하기 위한 메서드 「getDOMNode」를 제공하고 있는 것은 알고 있습니다만, 그 반대입니다.

이게 가능합니까?

아니요.

React의 중심 개념은 DOM을 실제로 제어할 수 없다는 것입니다.대신 공장 기능이 제어됩니다.DOM에 있는 것은 컨트롤의 현재 렌더링입니다.

실제로 필요한 경우 객체를 글로벌 변수로 유지할 수 있습니다.이 객체의 키는 공장 함수의 이름의 문자열 표현이고 값은 공장 함수의 값입니다.다음 렌더링 가능한 div에는 공장 함수는 공장 함수의 이름을 포함하는 속성을 유지합니다.

그러나 XY 문제(X가 필요하고, Y와 함께 방법을 확인한 다음 Y를 수행하는 방법)에 대한 질문일 수 있습니다. 목표를 설명한다면 React의 하향식 개념 모델에 더 잘 맞는 더 좋은 방법이 있을 것입니다.

일반적으로 렌더에서 컨트롤에 액세스하도록 요청하는 것은 캐시된 PNG 렌더에서 SVG에 액세스하도록 요청하는 것과 같습니다.그럴 수도 있지만, 보통 뭔가 다른 개념적으로 잘못되었다는 것은 위험 신호입니다.

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});

DOM 노드에서 반응 요소를 가져와야 할 경우 "이벤트를 통해 통신하고 콜백"이라는 접근법이 있습니다.

DOM 요소에서 커스텀이벤트를 실행하고 React 컴포넌트에서 해당 커스텀이벤트에 대한 이벤트청취자가 있어야 합니다.그러면 DOM 요소가 반응 구성 요소에 다시 매핑됩니다.

언급URL : https://stackoverflow.com/questions/24462679/react-get-react-component-from-a-child-dom-element