NextJS Script TradingView小部件配置

Question

在将我的网站上的一篇文章从Jekyll转移到NextJS时，我不知道如何将小部件配置传递给内置的脚本组件，它根本不显示小部件。下面是代码:

import Script from 'next/script'
export default function StockSnippet({Exchange, Ticker}) {
return <>
<Script src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js">               
{{"symbol": `${Exchange}:${Ticker}`,
"width": "100%",
"height": "100%",
"locale": "en",
"dateRange": "12M",
"colorTheme": "light",
"trendLineColor": "rgba(41, 98, 255, 1)",
"underLineColor": "rgba(41, 98, 255, 0.3)",
"underLineBottomColor": "rgba(41, 98, 255, 0)",
"isTransparent": false,
"autosize": true,
"largeChartUrl": ""}}
</Script>
</>

Answer 1

尝试通过调用JSON.stringify

将数据转换为JSON字符串

export default function StockSnippet({ Exchange, Ticker }) {
const wrapperStyle = {
width: "100%",
height: "100%"
}
return <>
<div id="tradingview-wrapper" style={wrapperStyle}>
<Script
id="tradingview-widget"
src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js"
onLoad={() => {
document.getElementById('tradingview-wrapper').appendChild(document.getElementById('tradingview-widget'));
}}>
{JSON.stringify({
"symbol": `${Ticker}:${Exchange}`,
"width": "100%",
"height": "100%",
"locale": "en",
"dateRange": "12M",
"colorTheme": "light",
"trendLineColor": "rgba(41, 98, 255, 1)",
"underLineColor": "rgba(41, 98, 255, 0.3)",
"underLineBottomColor": "rgba(41, 98, 255, 0)",
"isTransparent": false,
"autosize": true,
"largeChartUrl": "",
})}
</Script>
</div>
</>
}