Question

在下面的页面上，我遇到类型错误。我是React的新手，需要一些有关如何修复这些类型错误的帮助。

我读了很多关于它的页面，但是找不到与我在这里提供的案例特别相似的案例。

下面的页面是路由器的一部分，它仅基于提要“ MainNavLinks”填充链接列表。

奖金问题-我还需要弄清楚如何在主链接内建立子链接，并使代码在主UL内为这些链接创建一套新的UL。

谢谢！

import React from 'react';

function MainNav(props) {
  const content = props.MainNavLinks.map((each) =>
    <li key={each.id}>
      <a href={each.url}>{each.title}</a>
    </li>
  );
  return (
    <ul>{content}</ul>
  );
}

const MainNavLinks = [
  {
    id: 1, 
    title: 'Hello World', 
    url: 'http://www.example.com'
  },
  {
    id: 2, 
    title: 'Installation', 
    url: 'http://www.example.com'
  }
];


export default class MainNavClass extends React.Component {
  public render() {
    return (
      <MainNav MainNavLinks={MainNavLinks} />
    );
  }
}

Answer 1

传递到您的MainNav组件的道具根本没有输入。您必须像这样专门键入它们：

type NavLink = {
    id: number;
    title: string;
    url: string;
}

type MainNavProps = {
    navLinks: NavLink[];
};

function MainNav(props: MainNavProps) {
    return (
        <ul>
            {props.navLinks.map((navLink) => (
                <li key={navLink.id}>
                    <a href={navLink.url}>{navLink.title}</a>
                </li>
            ))}
        </ul>
    );
}

const mainNavLinks: NavLink[] = [
    {
        id: 1, 
        title: 'Hello World', 
        url: 'http://www.example.com',
    },
    {
        id: 2, 
        title: 'Installation', 
        url: 'http://www.example.com',
    }
];

export default function MainNavClass() {
    return (
        <MainNav navLinks={mainNavLinks} />
    );
}

如何在React中设置类型

1 个答案: