外部脚本在 ReactJS 中停止使用 <Link>

Question

我在使用 <Link to="/"> 时遇到一些外部脚本问题。

脚本加载到主布局index.js as

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

然后在 component 中用作 JSX

<div id="TA_selfserveprop789" className="TA_selfserveprop">
   <ul id="3LacWzULQY9" className="TA_links 2JjshLk6wRNW">
      <li id="odY7zRWG5" className="QzealNl"></li>
   </ul>
</div>

当浏览器重新加载或 URL 链接到一个正常的 <a href 锚时，这工作正常。然而，当使用 <Link> 时，脚本出现在页面源代码中但不加载数据。

我一直在 index.js 中加载脚本，因为在链接到页面时我发现脚本被多次添加到页面源中。它似乎也没有改变问题，两种方式的性能都是一样的。

Answer 1

尝试使用 require() 并从 ComponentDidMount() 中移除脚本注入。

在 index.js
的 render() 方法中添加这一行（或您要调用脚本的页面组件）。

 const myScript = require('/pathTo/myScript.js')

外部脚本在 ReactJS 中停止使用 <Link>

External scripts stop working with <Link> in ReactJS

javascript

reactjs

gatsby