外部とのReactJSアプリケーションの動作の変更（Optimizely実験用）

Question

私と私のチームはOptimizelyを使用してA/Bテストを行っています。通常は、ページのレイアウトや動作を変更する複雑なバリエーションを作成しています。

最近、ReactJSで構築されたクライアントを使用して作業を開始しました。最初のA/Bテストでは、ページやレイアウト上のいくつかの要素を変更するだけでしたが、他の要素の動作に影響を与える要素を追加する必要があった2番目の課題に直面しました。

つまり、3つのドロップダウンを持つフィルタを備えたページがあります。もう1つのドロップダウンを追加する必要があります。そのため、4つのいずれかの状態を変更すると、すべての現在の状態に基づいて製品リストが変更されます。

私たちは、JavaScript/jQueryコードをOptimizelyを通じて注入して、ReactJSアプリの "外"で（バックエンドで実際のアプリケーションコードを変更せずに）行う必要があるという難点があります。

質問：ReactJSアプリケーションオブジェクトとそのメソッドをアプリの外にJS/jQueryコードを挿入して使用する方法はありますか？

私たちの目標は、上記の方法でページの動作を変更することです。この問題を解決する他のオプションも役立ちます。

P.S.現時点では、私たちが見る問題を解決する唯一の方法は、JS/jQueryでフィルタを完全に再作成することです。それはより多くのアイデアを探している理由です。

Answer 1

カスタムコードを書く必要があります。みんなのエコシステムがとても違うので、具体的な答えを得るための情報がなくては難しいです。そのOptimizelyと労働組合の2017から03状態のための枠組みを築く/リアクトのにここでカップルの記事です：

1. Hijacking React Globals - コンポーネントのライフサイクル内で有効にするClearhead
2. 使用でOptimizely's Activation機能しながら、私が書いた記事は
3. キャンペーンのウィンドウレベル変数をwindow.variation = 'a' // or 'b'のように設定します。その後、ホット・スワップ・コンポーネントのコード内でそれを使用React.render(Components['Component'+(window.variation||'a')))

TLDRそのハードあなたが何らかの形で内部にフックすることができない限り、状態に反応修正します。

-Tom | CTO @ CROmetrics。約75回の反復試験が12ヶ月間続いた。

Answer 2

すぐに入手するにはいくつかの方法があります。そのうちのいくつかを以下で説明します。

1. Reduxを使用する場合は、指定したアクションをディスパッチするグローバル（=ウィンドウ）で関数を作成できます。ここでの詳細な例を参照してください。https://stackoverflow.com/a/41309189/7708957

2. あなたが（例えば、あなたがReact.jsを使用してウィジェットを開発している）Reduxのを使用しない場合 - あなたはcomponentDidMountであなたのハンドラを公開することができ、それらはcomponentWillUnmountでそれらを破壊します。

敬具、 デニス