在 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;
}

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

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

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

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

Answer 1

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

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

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

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

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>

2) 在 `TripAdvisor` componentDidMount()

上调用 injectselfserveprop 函数

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

我试过了，对我有用。

在 React Components 中安装转换 DOM 的外部脚本？

Mounting external scripts that transform the DOM in React Components?

javascript

reactjs

react-router

gatsby

1) 在src/layouts/index.js

2) 在 `TripAdvisor` componentDidMount()

在 React Components 中安装转换 DOM 的外部脚本？

Mounting external scripts that transform the DOM in React Components?

javascript

reactjs

react-router

gatsby

1) 在src/layouts/index.js

2) 在 TripAdvisor componentDidMount()

2) 在 `TripAdvisor` componentDidMount()