从外部改变ReactJS应用程序的行为（用于优化实验）

Question

我和我的团队正在使用Optimizely进行A / B测试。通常我们会创建复杂的变体，我们会改变页面的布局和行为。

最近，我们开始使用客户端，其站点基于ReactJS构建。虽然我们只需要更改页面和布局上的某些元素的第一个A / B测试相当容易，但我们遇到了第二个问题，我们需要添加一个应该影响其他元素行为的元素。

即，我们有一个产品页面，其中包含3个下拉列表的过滤器。我们需要再添加1个下拉列表，这样当更改4中任何一个的状态时，产品列表将根据所有这些状态的当前状态进行更改。

挑战在于我们需要在ReactJS应用程序的“外部”进行（不改变后端的实际应用程序代码），并通过Optimizely注入JavaScript / jQuery代码。

所以问题是：有没有办法以某种方式使用ReactJS应用程序对象及其方法在应用程序之外注入JS / jQuery代码？

我们的目标是以上述方式更改页面的行为，因此解决此问题的任何其他选项也会有所帮助。

P.S。目前解决问题的唯一方法是在JS / jQuery中完全重新创建过滤器，而不是使用当前的过滤器，这不是一个非常有效的解决方案。这就是为什么要寻找更多的想法。

Answer 1

您必须编写一些自定义代码。由于每个人的生态系统都是如此不同，因此没有更多信息可以为您提供具体答案。这里有几篇文章，虽然这是2017-03-03与Optimizely / React结合的框架：

1. Hijacking React Globals - 我在Clearhead写的帖子
2. 使用Optimizely's Activation功能在组件的生命周期内激活
3. 在广告系列中设置一个窗口级变量，例如window.variation = 'a' // or 'b'。然后在代码中使用它来热交换组件React.render(Components['Component'+(window.variation||'a')))

TLDR很难修改React状态，除非你能以某种方式挂钩内部。

-Tom | CTO @ CROmetrics。在过去12个月内推出了约75次React测试。

Answer 2

有几种方法可以快速获得它。其中一些我将在下面描述。

1. 如果使用Redux - 您可以在global（= window）中创建一个函数，该函数将调度指定的操作。请参阅此处的详细示例：https://stackoverflow.com/a/41309189/7708957

2. 如果您不使用Redux（例如，您正在使用React.js开发小部件） - 您可以在componentDidMount中公开处理程序，并在componentWillUnmount中销毁它们。< / p>

亲切的问候， 丹尼斯