バニラJavaScriptを使用して動的に追加された要素をクリックすることを模倣する

Question

私はプログラム的にナビゲートしたいReactJSベースのウェブサイトを持っています。基本的に、ワークフローはループされます。

1. Element1をクリックします。
2. Webページコードが動的に変更され、その間にElement2が追加されます。
3. Element2をクリックします。

その他、ElementNをクリックするまで、Webページは初期状態に戻り、Element1が再び表示されます。これらの要素をクリックすると、ウェブサイト自体から自動化したいものがあります。

ウェブサイトのコンテンツの作成と変更を担当するJSファイルにアクセスできます。私が興味を持っている要素を記述するコードを探し出し、必要に応じて余分なイベントリスナーを追加することができます。

私はクライアント側での開発がほぼ完全に新しいので、この作業を解決する私のアプローチは純粋に直感的です。これまでの私の考えは、DOMに要素が追加され、そのリスナーから "onclick"リスナーを呼び出す（または他の要素で "click"イベントを送出する）ときに起動する、ある種の "onAdded"イベントのイベントリスナーを追加することでした方法）。しかし、私はDOMツリーに追加を示すイベントは見つかりません。

1. はアプローチが実行可能な（かつ適切な）上述した：

   ので、厳密に言えば、私は2つの質問がありますか？もしそうなら、私はそれをどのように正確に達成するのですか？

2. 私はそれがすべて間違っているなら、私の仕事を達成する正しい方法は何でしょうか？マシュー・ハーベストの提案を1として

編集1

、私はcomponentDidMountなどのライフサイクルメソッドを反応させるのに見えました。私がクリックを自動化したい要素は独立した反応コンポーネントではなく、createElementコールの巨大なチェーンを持つrenderメソッドの中に追加された他のコンポーネントの内容です。

だから、問題は特定の要素がDOM構造に追加された瞬間を検出することから、その要素とやり取りする方法を見つけることに変わります。

簡単に（そして醜い）の方法は、私は現在、それを見ると、私はドットで区切られた数字の文字列である（そのdata-reactid属性でクリックしたい要素を探し、componentDidMountからwindowオブジェクトを使用することで、それを行うには私が知る限り、動的に生成され、要素階層を反映します）、必要なDOMイベントをディスパッチします。

文書の構造が変更された場合は、data-reactidの値が再び破損します。私はどういうわけかReact自身のonClickイベントを適切に送りたいと思っていますが、どうすればいいのか分かりません。 createElementメソッドに渡される関数をonClickプロパティの値としてcomponentDidMountから呼び出してみましたが、何らかの理由で機能しません。

this articleに記載されているDOMとやりとりする方法も試しましたが、私の場合はReactDOMオブジェクトが定義されていないようです。

私はクライアント側の開発者、特にReactの開発者ではないので、ウェブサイトのクライアントロジックがどのように機能しているかを全体的に把握することはできません。それをさらに難しくするために、縮小/難読化されるべきです。だから誰かが私にReactのすべてのドキュメントを読ませずに具体的な提案をすることができたら、私は感謝しています。

Answer 1

私のような疑惑のような質問には全く答えるべきではありませんが、私はそれを理解したように見えます。

私はまだそのようrender、componentDidMountまたはcomponentDidUpdateのようなコールバックのシリーズを持つオブジェクトとして反応アプリケーションの顕著な特徴を持っていたに対処しなければならなかっ縮小さ/難読化コード。 Matthew Herbstが示唆したように、私は彼らがしていることを調べました。

私は自動化するために必要なこれをクリックする要素はこのような何かを見createElement通話の長い鎖でrenderメソッド内で作成されました：

T["default"].createElement("li", null, T["default"].createElement("div", { 
    className: P["default"].img 
}, T["default"].createElement("img", { 
    src: n(600), 
    alt: "" 
}), T["default"].createElement("b", null , "+3")), T["default"].createElement("h4", null , "«Header text»", T["default"].createElement("b", null , "+3")), T["default"].createElement("p", null , "Description"), T["default"].createElement("div", { 
    className: P["default"].btn 
}, T["default"].createElement(A.Btn, { 
    mod: "info", 
    onClick: this._router.bind(this, "/gtr", "gtr") 
}, "Play"))) 

私はオリジナルのポストでそのコードを掲載している必要がありますが、私はここで何が起こっているのか分かりませんでした。それは結局のところ

、T["default"]によって参照されるオブジェクトは、T["default"].createElement呼び出しがReact.createElementものと実際に同等であったことを意味し、Reactオブジェクトです。

次に、article by James K. Nelsonが役に立ちました。これは、コンポーネントの特定の子を見つけるために、ref属性を割り当てる必要があると説明しました。私は、「再生」ボタンをことアクセスするために必要なので、私はその記述子オブジェクトのように見えたものにrefプロパティを追加しようとしたので、それは

T["default"].createElement(A.Btn, { 
    mod: "info", 
    ref: "automatedElement1", 
    onClick: this._router.bind(this, "/gtr", "gtr") 
}, "Play") 

ようになり、それが働きました。さて、componentDidUpdateメソッドの中、私は残念ながら、私はかなりそのDOMの反射に、このオブジェクトから取得する方法を理解していなかった

if (this.refs.hasOwnProperty("automatedElement1")) { 
    var buttonElement = this.refs.automatedElement1; 
} 

のようなコードを使用することができますが、単純にその内容を研究することによって、私はプロパティを見つけることができましたそのボタンのHTML要素のdata-reactid属性の値に対応します。それでは、私はdocument.querySelectorメソッドを使用して、要素のDOMノードを取得するよりも、何よりスマートな解決策を見つけない：

var buttonNode = document.querySelector('button[data-reactid="' + buttonElement._reactInternalInstance._rootNodeID + '"]'); 

if (buttonNode) { 
    buttonNode.click(); 
} 

これは悪い解決策になるかもしれないが、それは私が私の状況で見つけることができた、そしてそれが動作するソリューションです。それは、Reactアプリケーションとの遭遇が激しく、どこから始めるべきか分からなかった人に役立つことを願っています。