将TradingView小部件插入到Next.js中。
<p>我正在尝试将TradingView小部件插入到我的Next.js项目中，但是它没有显示任何内容。我在这里做错了什么吗？</p>
<pre class="brush:php;toolbar:false;">import React from 'react'
import { Helmet } from "react-helmet"
function EconomicCalendar() {
return (
<div>
<div className="tradingview-widget-container">
<div className="tradingview-widget-container__widget"></div>
<div className="tradingview-widget-copyright">
<a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank">
<span className="blue-text">Track all markets on TradingView</span>
</a>
</div>
<Helmet>
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-events.js" async>
{`
{
"width": "100%",
"height": "100%",
"colorTheme": "dark",
"isTransparent": false,
"locale": "en",
"importanceFilter": "-1,0,1",
"currencyFilter": "AUD,USD,CAD,CNY,EUR,FRF,DEM,ITL,JPY,KRW,MYR,MXN,NZD,SGD,ZAR,ESP,CHF,TRL,GBP"
}
`}
</script>
</Helmet>
</div>
</div>
)
}
export default EconomicCalendar</pre>
<p>通常应该怎么做</p>
1
778
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
如果您使用的是Next.js，您不需要使用React Helmet将脚本标签插入到头部。Next.js有自己的Script来优化和管理第三方JavaScript。或者您可以通过添加内联脚本来编写内联JavaScript。
请参阅官方文档https://nextjs.org/docs/app/building-your-application/optimizing/scripts