时间戳

首页 > 解决方案 > 如何将 HTML/JS 小部件包含到 reactjs？

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

问题描述

我试图在我的 ReactJS 应用程序中显示TradingView 小部件，但我尝试过的方法都没有奏效。

我试图包含的代码：

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

哪个有效但不是动态的...

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

如果有人能指出我在这方面的错误，我会很高兴:)

标签： javascriptreactjshtmlwidgettradingview-api

解决方案

推荐阅读