web-dev-qa-db-ja.com

React-get React子DOM要素のコンポーネント？

Reactコンポーネントが特定のDOM要素に関連付けられているものを把握できるようにしたいと思います。

たとえば、divがあり、Reactを使用してアプリケーション全体をレンダリングしているとします。 divは、Reactコンポーネントでレンダリングする必要がありますが、どれですか？

React=メソッドを提供することを知っている getDOMNode "Reactコンポーネントに関連付けられているが、私は反対のことをするのが好きです。

これは可能ですか？

javascriptdomreactjs
34
Brad Parks

番号。

Reactの中心的な概念は、実際にはDOMにコントロールがないということです。代わりに、コントロールはそのファクトリ関数です。DOMにあるのは、コントロールの現在のレンダリングです。

実際にこれが必要な場合は、オブジェクトをグローバル変数として保持し、そのキーはファクトリー関数の名前の文字列表現であり、値はファクトリー関数です。次に、レンダリング可能なdivで、次の名前を含む属性を保持します。ファクトリー機能。

しかし、これはXY問題の問題である可能性があります（Xが必要で、Yを使用して方法を確認し、Yを実行する方法を尋ねます）。おそらく、Reactのトップダウンの概念モデルにより適した方法があります。 。

一般的に、レンダリングからコントロールへのアクセスを取得することは、キャッシュされたPNGレンダリングからSVGへのアクセスを取得することと同じです。可能ですが、通常は概念的に他の何かが間違っていることは危険です。

17
John Haugeland

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

あなたの状況がDOMノードから反応要素を取得することを要求する場合、「イベントを介した通信とコールバック」というアプローチがあります。

DOM要素でカスタムイベントを起動し、そのカスタムイベントのイベントリスナーをReactコンポーネント。これにより、DOM要素がリアクティブコンポーネントにマップされます。

6
selvan