外部脚本停止使用ReactJS中的<link />

Question

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

脚本作为

加载到主布局index.js中

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()中删除脚本注入。

在render()的{​​{1}}方法中添加此行 （或者要调用脚本的页面组件）。

index.js