如何將 HTML 小部件代碼轉換為 NEXTjs 代碼以在應用程序中使用（CoinMarketCap Price Marquee Ticker）

Question

我正在嘗試將此 CoinMarketCap Price Marquee Ticker Widget 嵌入到我的 NEXTjs 應用程序中，但遇到了問題。 我將 go 通過我正在嘗試做的事情並完成我的過程。 希望有人可能嘗試過這樣做並且可能有一些建議。

模板代碼：

以下是 CoinMarketCap 網站上提供的代碼，最適合 HTML 頁面： https://coinmarketcap.com/widget/price-marquee/

<script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/coinMarquee.js"></script><div id="coinmarketcap-widget-marquee" coins="1,1027,825" currency="USD" theme="light" transparent="false" show-symbol-logo="true"></div>

這是它工作的一個例子，但只在 HTML 中：

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> <script type="text/javascript" src="https.//files.coinmarketcap.com/static/widget/coinMarquee:js" ></script> </head> <body> <h1> Cryptocurrency Ticker Slider </h1> <h3>Powered by, CoinMarketCap</h3> <div id="coinmarketcap-widget-marquee" coins="1,1027,825" currency="USD" theme="light" transparent="false" show-symbol-logo="true" ></div> </body> </html>

❌我的嘗試#1：

我試圖將它創建為一個單獨的 div 並從 next/script 導入腳本。 但是，當我保存和加載應用程序時，我的應用程序上的 window 中看不到任何內容。 我什至添加了一些樣式，但我沒有看到腳本正在執行。

import type { NextPage } from 'next'
import Script from 'next/script'

const About: NextPage = () => {
return (
<div className="token-coin">
   <Script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/coinMarquee.js" async></Script>
   <div className="coinmarketcap-widget-marquee" data-currency="oyster" data-base="USD" data-secondary="" data-ticker="true" data-rank="true" data-marketcap="true" data-volume="true" data-stats="USD" data-statsticker="false"></div>
</div>
  )
}

export default About

❌ 嘗試#2：

這是我認為可行的方法，但是我在 NEXTjs 的“硬幣”上遇到了這個錯誤，它在下面和上面一樣，腳本沒有加載到小部件 div 空間： (JSX attribute) coins: string Type '{ id: string; coins: string; currency: string; theme: string; transparent: string; "show-symbol-logo": string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Property 'coins' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. (JSX attribute) coins: string Type '{ id: string; coins: string; currency: string; theme: string; transparent: string; "show-symbol-logo": string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Property 'coins' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.

import type { NextPage } from 'next'
import Script from 'next/script'

const About: NextPage = () => {
return (
<Script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/coinMarquee.js"></Script>
<div id="coinmarketcap-widget-marquee" coins="1,1027,825" currency="USD" theme="light" transparent="false" show-symbol-logo="true"></div>
  )
}

export default About

對於如何將 CoinMarketCap 中的這個小部件添加到我的站點中的任何幫助或指導，我將非常感激！

非常感謝！

Answer 1

使用 Typescript 和 next.js 時，您可以編輯index.d.ts以包含 div 使用的屬性：

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    coins?:string;
    currency?:string;
    theme?:string;
    transparent?:string;
    tshow-symbol-logo?:string;
  }
}

作為替代方案，如果您僅使用 Javascript 和 React，您可以在index.html和 append 中創建小部件，當您的 React 組件安裝時將其創建到一個div中。

代碼沙盒

如何將 HTML 小部件代碼轉換為 NEXTjs 代碼以在應用程序中使用（CoinMarketCap Price Marquee Ticker）

問題描述

模板代碼：

❌我的嘗試#1：

❌ 嘗試#2：

1 個解決方案

解決方案1
2 已采納 2022-02-08 01:26:21

如何將 HTML 小部件代碼轉換為 NEXTjs 代碼以在應用程序中使用（CoinMarketCap Price Marquee Ticker）

問題描述

模板代碼：

❌我的嘗試#1：

❌ 嘗試#2：

1 個解決方案

解決方案1 2 已采納 2022-02-08 01:26:21

解決方案1
2 已采納 2022-02-08 01:26:21