Question

试图创建一个带有标题和用于href的子元素的Link元素。

import React from 'react';
import Link from 'next/link';
import styled from 'styled-components';

type Props = {
  title: string;
  slug: string;
};

const NavElement = ({ title, slug }: Props) => {
  return (
    <Link href={slug}>
      <a>{title}</a>
    </Link>
  );
};

export default NavElement;

package.json中的依赖项

  "dependencies": {
    "@types/react": "^16.9.34",
    "@types/styled-components": "^5.1.0",
    "axios": "^0.19.2",
    "contentful": "^7.14.3",
    "moment": "^2.24.0",
    "next": "9.3.5",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-lottie": "^1.2.3",
    "styled-components": "^5.1.0"
  }

遇到此错误：

JSX element type 'Link' is not a constructor function for JSX elements.
  Type 'Link' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.ts(2605)
JSX element class does not support attributes because it does not have a 'props' property.ts(2607)

在完成nextjs文档和以前的案例之前，我一生都无法发现问题所在。有提示吗？

Answer 1

如果用大括号括起来，则会丢失return语句

尝试一下...

const NavElement = ({ title, slug }: Props) => (
  <Link href={slug}>
    <a>{title}</a>
  </Link>;
);

或这个

const NavElement = ({ title, slug }: Props): JSX.Element => {
  return (
    <Link href={slug}>
      <a>{title}</a>
    </Link>
  );
};

NextJS 9.3链接不是JSX元素的构造函数

1 个答案: