Masukkan widget TradingView ke dalam Next.js.

Question

Saya cuba memasukkan widget TradingView ke dalam projek Next.js saya, tetapi ia tidak menunjukkan apa-apa. Adakah saya melakukan sesuatu yang salah di sini?

import React daripada 'react'
import { Helmet } daripada "react-helmet"

fungsi EconomicCalendar() {
  kembali (
    <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">Jejaki semua pasaran di TradingView</span>
          </a>
        </div>
        <Helmet>
          <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-events.js" async>
          {`
            {
              "lebar": "100%",
              "ketinggian": "100%",
              "colorTheme": "gelap",
              "isTransparent": palsu,
              "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"
            }
          `}
          </skrip>
        </Helmet>
      </div>
    </div>
  )
}

eksport lalai EconomicCalendar

Apakah yang biasa anda lakukan

Answer 1

Jika anda menggunakan Next.js, anda tidak perlu menggunakan React Helmet untuk memasukkan tag skrip ke dalam kepala. Next.js mempunyai Skripnya sendiri untuk mengoptimumkan dan mengurus JavaScript pihak ketiga. Atau anda boleh menulis JavaScript sebaris dengan menambahkan skrip sebaris.

Sila rujuk dokumentasi rasmi https://nextjs.org/docs/app/building-your-application/optimizing/scripts