在React Components中挂载转换DOM的外部脚本？

Question

需要解决我在没有决心的情况下以多种方式提出的问题。

我有来自TripAdvisor的外部脚本，这些脚本作为componentDidMount安装在组件中。同样shouldComponentUpdate()为false，以避免eventListeners componentDidMount中的layouts/index.js未来影响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;
}

问题是当Link或react-route使用gatsby-link来自包含该组件的页面时，不会呈现来自TripAdvisor的内容。

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

我如何unmount，forceUpdate或任何其他解决方案让这些脚本在route change上重新呈现？

可以找到完整的源代码here。

Answer 1

TripAdvisor 脚本似乎正在创建一个名为injectselfserveprop***的函数。 （其中***是随机数）。

此功能负责显示 TripAdvisor 小部件的HTML代码。

但是，由于不明原因，当您使用Link到达组件时，不会调用此函数。

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

1）在src / layouts / index.js

中定义脚本标记

因为 TripAdvisor ＆＃39;脚本创建这些函数，我们必须在呈现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>

2）调用injectselfserveprop componentDidMount（）

上的TripAdvisor函数

componentDidMount() {
  // find any function that begins with 'injectselfserveprop'
  // and execute it.
  Object.keys(window).forEach((key) => {
    if (key.match(/^injectselfserveprop[0-9]+$/)) {
      window[key]();
    }
  });
}

我试过这个，它对我有用。