Как включить виджет HTML / JS для реагирования? - PullRequest
Новая
       36

Как включить виджет HTML / JS для реагирования?

1 голос
/ 04 мая 2019

Я пытаюсь отобразить виджет TradingView в моем приложении ReactJS, но ни один из методов, которые я пробовал, не работает.

Код, который я пытаюсь включить: 

  <div class="tradingview-widget-container__widget"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/markets/cryptocurrencies/prices-all/" rel="noopener" target="_blank"><span class="blue-text">Cryptocurrency Markets</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-screener.js" async>
  {
  "width": 1000,
  "height": 490,
  "defaultColumn": "overview",
  "screener_type": "crypto_mkt",
  "displayCurrency": "USD",
  "colorTheme": "light",
  "transparency": false,
  "locale": "en"
}
  </script>
</div>

Попытка визуализации с использованием: <div dangerouslySetInnerHTML={{ __html: THECODE }} />

Попытка визуализации следующим образом: 

  <div className="tradingview-widget-container__widget"></div>
  <div className="tradingview-widget-copyright"><a href="https://www.tradingview.com/markets/cryptocurrencies/prices-all/" rel="noopener" target="_blank">
  <span className="blue-text">Cryptocurrency Markets</span></a> by TradingView</div>
  {this.loadScript('https://s3.tradingview.com/external-embedding/embed-widget-screener.js')}
</div>

с использованием этой функции loadScript: 

loadScript = function(src) {
    var tag = document.createElement(`script`, {
      width: 1000,
      height: 490,
      defaultColumn: "overview",
      screener_type: "crypto_mkt",
      displayCurrency: "USD",
      colorTheme: "light",
      transparency: false,
      locale: "en",
    });
    tag.async = true;
    tag.type = 'text/javascript';
    tag.src = src;
    document.getElementsByTagName('div')[0].appendChild(tag);
  }

Не работающий API говорит, что настройки недействительны.

Также пытался сделать: 

  <div class="tradingview-widget-container__widget"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/markets/cryptocurrencies/prices-all/" rel="noopener" target="_blank"><span class="blue-text">Cryptocurrency Markets</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-screener.js" async>
  {
  "width": 1000,
  "height": 490,
  "defaultColumn": "overview",
  "screener_type": "crypto_mkt",
  "displayCurrency": "USD",
  "colorTheme": "light",
  "transparency": false,
  "locale": "en"
}
  </script>
</div>')

, который работает, но не является динамическим ...

Я ожидаю, что на выходе будет виджет с динамическим использованием.

Буду рад, если кто-нибудь подскажет мне мои ошибки в этом:)

...