Javascript 在React组件中装载转换DOM的外部脚本？

需要一个问题的解决方案，我在很多方面都没有解决这个问题

我有来自TripAdvisor的外部脚本，它们作为

componentDidMount

装入组件中。另外，

shouldComponentUpdate（）

as

false

以避免将来的

eventListeners

也由

layouts/index.js中的
componentDidMount
装载，从而影响TripAdvisor内容，使其因重新呈现DOM而消失

componentDidMount () {
    const tripadvisorLeft = document.createElement("script");
    tripadvisorLeft.src = "https://www.jscache.com/wejs?wtype=selfserveprop&uniq=789&locationId=10467767&lang=en_AU&rating=true&nreviews=0&writereviewlink=true&popIdx=true&iswide=true&border=false&display_version=2";
    document.body.appendChild(tripadvisorLeft);

    const tripadvisorRight = document.createElement("script");
    tripadvisorRight.src = "https://www.jscache.com/wejs?wtype=selfserveprop&uniq=998&locationId=10467767&lang=en_AU&rating=false&nreviews=4&writereviewlink=false&popIdx=false&iswide=true&border=false&display_version=2";
    document.body.appendChild(tripadvisorRight);
}

shouldComponentUpdate() {
    return false;
}

问题在于，当通过
react route
或
gatsby Link
使用
Link
与包含组件的页面进行交互时，TripAdvisor的内容不会呈现

如果我刷新页面上的浏览器-内容可用。
看这里-

如何
卸载
、
强制更新
或任何其他解决方案在
路由更改
上重新呈现这些脚本

完整的源代码可以找到
 TripAdvisor脚本似乎正在创建一个名为
InjectSelfServePro***
的函数。（其中，
***
为随机数）

此函数负责显示TripAdvisor小部件的HTML代码

但是，由于不清楚的原因，当您使用
链接到达组件时，不会调用此函数

这是针对您的问题的一种解决方案，可能不是最好的：

1） 在src/layouts/index.js中定义脚本标记
因为TripAdvisor脚本创建了这些函数，所以我们必须在呈现
TripAdvisor
组件之前定义脚本

<Helmet>
  // ...
  <script src={`https://www.jscache.com/wejs?wtype=selfserveprop&uniq=789&locationId=10467767&lang=en_AU&rating=true&nreviews=0&writereviewlink=true&popIdx=true&iswide=true&border=false&display_version=2`}/>
  <script src={`https://www.jscache.com/wejs?wtype=selfserveprop&uniq=998&locationId=10467767&lang=en_AU&rating=false&nreviews=4&writereviewlink=false&popIdx=false&iswide=true&border=false&display_version=2`}/>
</Helmet>

我已经试过了，它对我很有效。
这不是的转载吗？是的，这是正确的。我没有得到正确的答案，因此决定稍微改变这个问题。很明显，它起了作用，正如你用一个有效的解决方案回答的那样。如果你想离开，把你的答案从她身上移开，交给另一个人，我会接受的，你会得到赏金的。然后我会把这个问题去掉。是的，你是对的。我将在这里留下我的答案，也许它会给某人一个简单而更好的解决方案的想法；）谢谢你的回答。这对我很有效。然而，这确实提出了另一个问题。如果打开URL，脚本将显示数据，但是如果之前加载了任何页面，例如
/reviews
路径，则不会在第一个条目中加载脚本。是的，这是我在anwser第一部分中的小“hacks”：在
src/layouts/index.js
中定义标记。根据您的github repo，您仍然调用
TripAdvisor
组件上的脚本，这不是我在回答中提到的。不幸的是，我无法从
layouts/index.js
加载这些脚本。原因是有多个属性，每个属性都有自己的
locationID
我已经放回
模板/properties/reviews.js
了，这些属性没有任何区别，但它们是
createPages
的根目录，我明白了。如果将脚本放在
templates/properties.js
上会怎么样？您需要找到将安装的通用祖先。将所有属性脚本及其关联的
locationId
放入
layout/index.js
中是否是一个相关的解决方案？最后，如果这一切都不起作用，我想您可以在所有模板中完成，
componentDidMount（）
谢谢。不幸的是，我通过你建议的方法得到了同样的回答。我将研究获取数据的其他方法。我知道TripAdvisor有一个内容API，所以我将研究如何访问它。谢谢你的帮助，我已经接受了你的回答，因为它对我最初概述的问题是正确的。
componentDidMount() {
  // find any function that begins with 'injectselfserveprop'
  // and execute it.
  Object.keys(window).forEach((key) => {
    if (key.match(/^injectselfserveprop[0-9]+$/)) {
      window[key]();
    }
  });
}