我试图在我的 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>')
哪个有效但不是动态的...
我希望输出是动态使用的小部件。
如果有人能指出我在这方面的错误,我会很高兴:)