web-dev-qa-db-ja.com

コンソールで反応要素の小道具と状態をどのように検査しますか？

React Developer Tools Reactコンポーネントツリーを検査し、小道具、イベントハンドラーなどを見るために多くの力を与えます。しかし、私が本当にやりたいことはブラウザコンソールでこれらのデータ構造を検査できるようにします。

chromeでは、$0を使用して、コンソールで現在選択されているDOM要素を操作できます。 Reactコンポーネント情報を$0から抽出する方法はありますか、またはReact Dev Toolsで同様のことができますか？

google-chrome-devtoolsreactjs
50
Gil Birman

React Developer Tools を使用すると、$rを使用して、選択したReactコンポーネントへの参照を取得できます。

次のスクリーンショットは、React Developer Toolsを使用して、Explorerという状態オブジェクトを持つコンポーネント（nodeList）を選択することを示しています。コンソールで$r.state.nodeListを記述するだけで、状態のこのオブジェクトを参照できます。小道具でも同じように機能します（例：$r.props.path）

Using $r to reference a React Component

58
Jürgen Brandstetter

あなたの質問に対する答えは、ここで私が尋ねた同様の質問で見つけることができます： React-デバッグのためにDOM要素からコンポーネントを取得する

私はここで答えを提供しています。重複としてマークしたり、上記のコメントを付けるために必要な評価ポイントがないからです。

基本的に、Reactの開発ビルドを使用している場合、TestUtilsを活用して目標を達成できるため、これは可能です。

次の2つのことだけを行う必要があります。

  • React.render（）から取得したルートレベルコンポーネントを静的に保存します。
  • 静的コンポーネントにアクセスする$ 0でコンソールで使用できるグローバルデバッグヘルパー関数を作成します。

そのため、コンソールのコードは次のようになります。

> getComponent($0).props

GetComponentの実装では、見つかったすべてのコンポーネントでgetDOMNodeを呼び出し、渡された要素と照合することにより、React.addons.TestUtils.findAllInRenderedTreeを使用して一致を検索できます。

15
LodeRunner28

コンソール（Firefox、Chrome）を開き、reactjsでレンダリングされたDOM要素を検索するか、jsスクリプトを実行して検索します。

document.getElementById('ROOT')

次に、「__ reactInternalInstace $ ....」のような名前で始まる属性のオブジェクトプロパティビューアで要素プロパティを確認し、_DebugOwnerを展開してstateNodeを確認します。

見つかったstateNodeには、reactjsアプリで頻繁に使用される「state」および「props」属性が含まれます（含まれている場合）。

4
harvyS

状態オブジェクトまたは支柱オブジェクトをウィンドウオブジェクトに割り当てます。

window.title = this.state.title

次に、開発ツールコンソールから、公開されたオブジェクトに対して次のようなさまざまな方法を試すことができます。

window.title.length

8

2
Fellow Stranger