javascript - 如何将此 Tripadvisor 插件添加到我的 React 网站？

Question

我正在尝试将 Tripadvisor 评分小部件添加到我的 React 网站(请参阅下面的代码)。目前，只有 Tripadvisor 日志正在加载，没有评级信息。我认为小部件中的脚本没有运行，我不确定如何让它运行。

我使用 Helmet 加载了脚本，并且可以在浏览器的文档头部看到它。在同一个组件中，我尝试渲染小部件。

//Here is the code of the widget:


<div id="TA_cdsratingsonlynarrow350" class="TA_cdsratingsonlynarrow">
       <ul id="80bNGet6b" class="TA_links mE4BAE">
          <li id="u9nO7YH4pF" class="aWtKBjB9S">
            <a target="_blank" href="https://www.tripadvisor.com/">
              <img
                src="https://www.tripadvisor.com/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png"
                alt="TripAdvisor"
              />
            </a>
          </li>
        </ul>
</div>

<script
   async
   src="https://www.jscache.com/wejs
wtype=cdsratingsonlynarrow&amp;uniq=350&amp;locationId=17821239&amp;lang=en_US&amp;border=true&amp;display_version=2"
   data-loadtrk
   onload="this.loadtrk=true">
</script>


//Here is the code of my attempt:


const Home = () => {
  return (
    <Layout>
      <Helmet>
        <script
          async
          src="https://www.jscache.com/wejs?wtype=cdsratingsonlynarrow&amp;uniq=350&amp;locationId=17821239&amp;lang=en_US&amp;border=true&amp;display_version=2"
          data-loadtrk
          onload="this.loadtrk=true"
        ></script>
      </Helmet>
      <div id="TA_cdsratingsonlynarrow350" class="TA_cdsratingsonlynarrow">
        <ul id="80bNGet6b" class="TA_links mE4BAE">
          <li id="u9nO7YH4pF" class="aWtKBjB9S">
            <a target="_blank" href="https://www.tripadvisor.com/">
              <img
                src="https://www.tripadvisor.com/img/cdsi/img2/branding/tripadvisor_log o_transp_340x80-18034-2.png"
                alt="TripAdvisor"
              />
            </a>
          </li>
        </ul>
      </div>
</Layout>


I expect the full tripadvisor widget to load, but instead it just loads the Tripadvisor logo image (which does not require the script to be run).

The widget looks fine when I test it in a plain html document, but I can't get it to work in React. Any help much appreciated!

Answer 1

感谢您的提问。在控制台中接收错误(通过在 Chrome 中右键单击并选择检查)将有助于确定问题的根源。

我认为这里发生的是与网站安全相关的冲突。

在标识 jscashe.com URL 的行中，改用此 URL:https://www.tripadvisor.com/WidgetEmbed-cdsratingsonlynarrow?amp;locationId=17821239&border=true&uniq=350&lang=en_US&display_version=2