1

我正在尝试将此 CoinMarketCap Price Marquee Ticker 小部件嵌入到我的 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 导入脚本。但是，当我保存和加载应用程序时，我的应用程序的窗口中看不到任何内容。我什至添加了一些样式，但我没有看到脚本正在执行。

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>'.

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 中的这个小部件添加到我的网站的任何帮助或指导！

非常感谢！

4

1 回答 1

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，您可以在安装 React 组件时在 中创建小部件index.html并将其附加到 a中。div

代码沙盒

于 2022-02-08T01:26:21.313 回答