Как встроить Google Trends в приложение React - PullRequest
Новая
       19

Как встроить Google Trends в приложение React

0 голосов
/ 24 ноября 2018

Я пытаюсь встроить 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>

, но я получаю такие слова, как

'тренды' не определены no-undef

Я пытался добавить 'this' и 'window', но получаю разные ошибки.

Может ли кто-нибудь помочь мне исправить это?

EDIT

Хотя предлагаемое решение не сработало для меня напрямую, мне удалось заставить его работать должным образом, взяв сгенерированный тег 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"
          />

1 Ответ

0 голосов
/ 10 марта 2019

Сначала загрузите URL скрипта в ваш HTML-файл.Затем используйте response-script-tag из npm и напишите это на рендере вашего компонента: 

<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>
...