如何将 HTML 小部件代码转换为 NEXTjs 代码以在应用程序中使用（CoinMarketCap Price Marquee Ticker）

Question

我正在尝试将此 CoinMarketCap Price Marquee Ticker Widget 嵌入到我的 NEXTjs 应用程序中，但遇到了问题。我将介绍我正在尝试做的事情，并介绍我的过程。希望有人可能已经尝试过这样做并且可能有一些建议。

模板代码：

这是 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 space: (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 中创建小部件，并在安装 React 组件时将其附加到 div。

Codesandbox

如何将 HTML 小部件代码转换为 NEXTjs 代码以在应用程序中使用（CoinMarketCap Price Marquee Ticker）

How to turn HTML widget code into NEXTjs code to use in an app (CoinMarketCap Price Marquee Ticker)

javascript

widget

reactjs

next.js

coinmarketcap

模板代码：

❌ 我的尝试 #1：

❌ 尝试 #2：