如何将HTML / JS小部件包含到reactjs？

Question

我正在尝试在我的ReactJS应用中显示TradingView widget，但是我尝试过的所有方法都没有起作用。

我要包含的代码：

  <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>')

有效但不是动态的...

我希望输出是动态使用的小部件。

如果有人可以指出我的错误，我会很乐意的：）