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

Answer 2

事实证明，通过执行gatsby build && gatsby serve，小部件可以正常工作。我以前正在运行gatsby develop，但当时无法正常工作。如果有人知道为什么会这样，我很想知道！

如何将该Tripadvisor小部件添加到我的React网站？

2 个答案: