[解決済み] React - デバッグのためにDOM要素からコンポーネントを取得する

質問

コンソールでのデバッグのために、バックのReactコンポーネントを取得するためにDOM要素のインスタンスを使用するReactで利用可能なメカニズムはありますか？

この質問は、本番コードで使用するという文脈で以前に質問されました。しかし、私の焦点は、デバッグを目的とした開発ビルドにあります。

私はよく React 用の Chrome デバッグ拡張機能 をよく見かけますが、これはすべてのブラウザで利用できるわけではありません。DOM エクスプローラーとコンソールを組み合わせると、ハイライトされた DOM 要素に関する情報にアクセスするために '$0' ショートカットを簡単に使用することができます。

デバッグ コンソールで、次のようなコードを書きたいと思います。 getComponentFromElement($0).props のようなコードをデバッグ コンソールに書きたいと思います。

Reactの開発ビルドでも、コンポーネントを取得するために要素のReactIdを使用するメカニズムはないのでしょうか？

どのように解決するのですか？

ドキュメントに目を通したところ、外部で公開されているAPIでは、直接IDでReactコンポーネントを探しに行くことはできないようです。しかし、あなたの最初の React.render() の呼び出しを更新し、戻り値をどこかに保持することができます、例えば。

window.searchRoot = React.render(React.createElement......

その後、searchRoot を参照し、直接その中を見るか、あるいは React.addons.TestUtils 例えば、これはすべてのコンポーネントを提供します。

var componentsArray = React.addons.TestUtils.findAllInRenderedTree(window.searchRoot, function() { return true; });

このツリーをフィルタリングするためのいくつかの組み込みメソッドがあります。また、独自の関数を書いて、何らかのチェックに基づいて構成要素のみを返すこともできます。

TestUtilsの詳細はこちら。 https://facebook.github.io/react/docs/test-utils.html