reactjs - nextjs- typescript- 属性 'className' 不存在于类型'IntrinsicAttributes & IntrinsicClassAttributes

Question

我已经使用 typescript 链接创建了基本的 nextjs 应用程序 - https://github.com/zeit/next.js/tree/master/examples/with-typescript

我无法将 className 属性添加到任何元素。我遇到以下错误。类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; 上不存在属性“className” }>

我收到其他属性的类型错误，例如链接元素上的 rel。

Answer 1

See the NextJS docs. The Link isn't a DOM-element, so you need to add className directly to the <a> tag, but not to the <Link>.

The basic example from the docs:

// pages/index.js
import Link from 'next/link'

function Home() {
  return (
    <>
      <ul>
        <li>Home</li>
        <li>
          <Link href="/about">
            <a>About Us</a>
          </Link>
        </li>
      </ul>
    </>
  )
}

export default Home

Answer 2

import React from 'react';
import Link from 'next/link';
import style from './redButton.module.css';

interface Props {
  href: string;
  text?: string;
}

const RedButton: React.FC<Props> = ({ href, text }) => {
  return (
    <Link href={href}>
      <a rel="nofollow" className={style.redButton}>
        {text}
      </a>
    </Link>
  );
};

export default RedButton;

在这种情况下，您必须将rel="",添加className={}到<a>标签而不是<Link>from'next/link'