Me and my team are using Optimizely to conduct A/B test. Normally we are creating complex variations where we change layout and behaviour of pages.
Lately, we started to work with a client, whose site is built on ReactJS. While the first A/B test where we just needed to change some elements on the page and layout was fairly easy, we faced a challenge with the second one, where we needed to add an element which should affect behaviour of other elements.
Namely, we have a page with products which has filter with 3 drop-downs. We need to add 1 more dropdown, so that when changing state of any of the 4, product list will be changed based on current state of all of them.
The challenge is that we need to do it "outside" of ReactJS app (without altering actual app code on backend), with JavaScript/jQuery code injected through Optimizely.
So the question is: is there a way to somehow use ReactJS app objects and their methods with an injected JS/jQuery code outside of the app?
Our goal is to change behaviour of the page in the above described way, so any other options to solve this problem will also be helpful.
P.S. For now the only way to solve the problem we see is fully re-creating filter in JS/jQuery instead of using current one, which is not very efficient solution. That is why searching for more ideas.