Reactコンポーネントからデータを読み取りますか？[複製]
Dec 01 2020
Reactを使用しているサードパーティのWebページでreactコンポーネントに関連付けられたデータを読み取れるようにしたいと思います。そのページのChromeDevコンソールツール内でjavascriptを使用してこれを読み取れるようにしたいと思います。これは可能ですか？
たとえば、reactによって描画されるTR要素があります。通常のdocument.getElementById（）を使用してこのTRを取得し、それを使用して基になる反応データを取得したいと思います。
React Developer Tools Extensionを使用すると、props.dataの下にあるデータを確認できます。どうすればそれを読み取ることができますか？
ここでは、Reactをブラックボックスとして扱っていることに注意してください。
注：この回答によれば、DOM要素からreactオブジェクトを取得でき、それは機能します：React-デバッグのためにDOM要素からコンポーネントを取得します
window.findReactComponent = function(el) {
for (const key in el) {
if (key.startsWith('__reactInternalInstance$')) {
const fiberNode = el[key];
return fiberNode && fiberNode.return && fiberNode.return.stateNode;
}
}
return null;
};
しかし、それを手に入れたら、どうすれば小道具にたどり着くことができますか？
回答
1 DanielWilliams Dec 01 2020 at 06:19
あは、鍵を見つけました。正しいDOM要素を取得する際には注意が必要です。私は階層をはるかに下にしようとしていました。React Devツール拡張機能を使用して「一致するDOM要素を検査する」と、適切な要素が得られ、その小道具を取得できました。