如何将 Google 趋势嵌入到 React 应用程序中

Question

我正在尝试将 Google Trends 嵌入到 React 中，这样我就可以动态调整参数。我可以成功地将它直接嵌入到 index.html 文件中。

   <script
      type="text/javascript"
      src="https://ssl.gstatic.com/trends_nrtr/1644_RC01/embed_loader.js"
    ></script>
    <script type="text/javascript">
      trends.embed.renderExploreWidget(
        "TIMESERIES",
        {
          comparisonItem: [{ keyword: "/m/030q7", geo: "", time: "now 7-d" }],
          category: 0,
          property: ""
        },
        {
          exploreQuery: "q=%2Fm%2F030q7&date=now%207-d",
          guestPath: "https://trends.google.com:443/trends/embed/"
        }
      );
    </script>

但是，我需要能够通过用户输入更改它，因此它需要在我的 jsx 文件中。我发现了一个有用的 Helmet 组件来帮助添加脚本

  <Helmet>
    <script
      type="text/javascript"
      src="https://ssl.gstatic.com/trends_nrtr/1644_RC01/embed_loader.js"
    />
    <script type="text/javascript">
      {trends.embed.renderExploreWidget(
        "TIMESERIES",
        {
          comparisonItem: [
            { keyword: "/m/030q7", geo: "", time: "now 7-d" }
          ],
          category: 0,
          property: ""
        },
        {
          exploreQuery: "q=%2Fm%2F030q7&date=now%207-d",
          guestPath: "https://trends.google.com:443/trends/embed/"
        }
      )}
    </script>
  </Helmet>

但我得到了

'trends' is not defined no-undef

我试过添加 'this' 和 'window' 但得到了不同的错误。

谁能帮我解决这个问题？

编辑

虽然建议的解决方案不能直接对我起作用，但我确实通过采用生成的 iframe 标记并实施它来使其正常工作。

          <iframe
            id="trends-widget-2"
            src="https://trends.google.com:443/trends/embed/explore/TIMESERIES?req=%7B%22comparisonItem%22%3A%5B%7B%22keyword%22%3A%22bitcoin%22%2C%22geo%22%3A%22US%22%2C%22time%22%3A%22today%2012-m%22%7D%5D%2C%22category%22%3A0%2C%22property%22%3A%22%22%7D&amp;tz=-480&amp;eq=q%3Dbrexit%26geo%3DUS%26date%3Dtoday%2012-m"
            width="100%"
            height="300px"
            frameborder="0"
            scrolling="0"
          />

Answer 1

首先将脚本 url 加载到您的 html 文件中。然后使用 npm 中的 react-script-tag，然后将其写在组件的渲染上：

<ScriptTag type="text/javascript">
        {'trends.embed.renderExploreWidgetTo(
  document.getElementById('widget'),
  'TIMESERIES', 
  {'comparisonItem': [{'keyword':'chicken','geo':'','time':'today 12-m'}],'category':0,'property':''}, 
  {'exploreQuery':'q=chicken&date=today 12-m','guestPath':'https://trends.google.com:443/trends/embed/'}
)'}
</ScriptTag>

Answer 2

我意识到这个问题是前段时间发布的，但我想分享一个 Google Trends 的可重用组件，以及我如何将它嵌入到 React 组件中，以防将来它对任何人有所帮助。为了能够加载脚本，我使用了 react-load-script 库。

这是代码框：

https://codesandbox.io/embed/competent-cookies-v2kjz?fontsize=14&hidenavigation=1&theme=dark

这是代码：

// App.js

import React from "react";
import GoogleTrends from "./GoogleTrends";
import "./styles.css";

export default function App() {
  return (
    <>
      <h1> Google Trends Example</h1>
      <p>
        Put the GoogleTrends comonent in a div with an id. Use the id, e.g.
        "widget" inside document.getElementById("widget") in the GoogleTrends
        component.
      </p>
      <div id="widget">
        <GoogleTrends
          type="TIMESERIES"
          keyword="Celine Dion"
          url="https://ssl.gstatic.com/trends_nrtr/2051_RC11/embed_loader.js"
        />
        <GoogleTrends
          type="GEO_MAP"
          keyword="Celine Dion"
          url="https://ssl.gstatic.com/trends_nrtr/2051_RC11/embed_loader.js"
        />
      </div>
    </>
  );
}

// GoogleTrends.js

import React from "react";
import ReactDOM from "react-dom";
import Script from "react-load-script";

export default function GoogleTrends({ type, keyword, url }) {
  const handleScriptLoad = _ => {
    window.trends.embed.renderExploreWidgetTo(
      document.getElementById("widget"),
      type,
      {
        comparisonItem: [{ keyword, geo: "US", time: "today 12-m" }],
        category: 0,
        property: ""
      },
      {
        exploreQuery: `q=${encodeURI(keyword)}&geo=US&date=today 12-m`,
        guestPath: "https://trends.google.com:443/trends/embed/"
      }
    );
  };

  const renderGoogleTrend = _ => {
    return <Script url={url} onLoad={handleScriptLoad} />;
  };

  return <div className="googleTrend">{renderGoogleTrend()}</div>;
}

如何将 Google 趋势嵌入到 React 应用程序中

How to Embed Google Trends into React app

embed

reactjs

google-trends