在Next.js中嵌入TradingView组件无显示，求正确实现方案

你的代码存在以下几个关键问题：

• 使用react-helmet加载TradingView脚本在Next.js中兼容性不佳，Next.js推荐使用内置的<Script>组件处理客户端脚本
• 脚本标签内的配置对象写法错误：多嵌套了一层大括号，且直接将JS对象放入<script>标签会被解析为文本而非有效配置
• 容器的height: 100%没有父元素高度支撑，组件无法撑开显示

正确实现方式 #

以下是Next.js项目中嵌入TradingView经济日历的标准写法：

import Script from 'next/script';

function EconomicCalendar() {
  return (
    <div style={{ height: '800px', width: '100%' }}> {/* 给容器设置明确高度 */}
      <div className="tradingview-widget-container" style={{ height: '100%', width: '100%' }}>
        <div className="tradingview-widget-container__widget" style={{ height: '100%', width: '100%' }}></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>
        {/* 使用Next.js内置Script组件，采用afterInteractive策略确保客户端加载 */}
        <Script
          src="https://s3.tradingview.com/external-embedding/embed-widget-events.js"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              {
                "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"
              }
            `,
          }}
        />
      </div>
    </div>
  );
}

export default EconomicCalendar;

关键优化点说明 #

• 替换react-helmet为Next.js的<Script>组件：afterInteractive策略会在页面交互后加载脚本，既不阻塞首屏渲染，又能确保脚本在客户端正常执行
• 用dangerouslySetInnerHTML传递配置：确保配置被解析为脚本所需的JSON格式，避免语法错误
• 给容器设置明确高度：解决100%高度无父元素支撑导致的组件无法显示问题，可根据需求调整高度值
• 移除多余的嵌套大括号：配置对象仅需一层大括号，符合TradingView嵌入脚本的要求

内容的提问来源于stack exchange，提问作者Lim Jian Hong