Fügen Sie das TradingView-Widget in Next.js ein.

Question

Ich versuche, das TradingView-Widget in mein Next.js-Projekt einzufügen, aber es zeigt nichts an. Mache ich hier etwas falsch?

import React from 'react'
{Helm} aus „react-helmet“ importieren

Funktion EconomicCalendar() {
  zurückkehren (
    <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">Alle Märkte auf TradingView verfolgen</span>
          </a>
        </div>
        <Helm>
          <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-events.js" async>
          {`
            {
              „Breite“: „100 %“,
              „Höhe“: „100 %“,
              „colorTheme“: „dunkel“,
              „isTransparent“: falsch,
              "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>
        </Helm>
      </div>
    </div>
  )
}

Standard-Wirtschaftskalender exportieren

Was sollten Sie normalerweise tun

Answer 1

如果您使用的是Next.js，您不需要使用React Helmet将脚本标签插入到头部。Next.js有自己的Script来优化和管理第三方JavaScript。或者您可以通过添加内联脚本来编写内联JavaScript。

请参阅官方文档https://nextjs.org/docs/app/building-your-application/optimizing/scripts