型別'IntrinsicAttributes&{name:string;上不存在屬性'item'href：字串；}'

我正在學習 TypeScript 以在個人 React 專案中使用。我很難解決這個錯誤：

ERROR in src/components/navigation/Navigation.tsx:16:27
TS2322: Type '{ item: { name: string; href: string; }; }' is not assignable to type 'IntrinsicAttributes & { name: string; href: string; }'.
  Property 'item' does not exist on type 'IntrinsicAttributes & { name: string; href: string; }'.
    14 |         <Navbar.Brand>{data.navbar.navBrand}</Navbar.Brand>
    15 |         { data.navbar.navItems.forEach(navItem => {
  > 16 |           <NavigationItem item={navItem} />
       |                           ^^^^
    17 |         })}
    18 |       </Container>
    19 |     </Navbar>

我所擁有的是以下內容：

// Navigation.tsx
// Bootstrap imports
import { Container, Navbar } from 'react-bootstrap';

// Component imports
import NavigationItem from './NavigationItem';

// Import data
import data from '../../data/data.json';

const Navigation = () => {
  return (
    <Navbar bg='light'>
      <Container>
        <Navbar.Brand>{data.navbar.navBrand}</Navbar.Brand>
        { data.navbar.navItems.forEach(navItem => {
          <NavigationItem item={navItem} />
        })}
      </Container>
    </Navbar>
  );
};

export default Navigation;

// NavigationItem.tsx
const NavigationItem = (props: {name: string, href: string }): JSX.Element => {
  return <a href={props.href}>{props.name}</a>;
};

export default NavigationItem;

// data.json
{
  "navbar": {
    "navBrand": "My Name",
    "navItems": [
      {
        "name": "Bio",
        "href": "#bio"
      },
      {
        "name": "Projects",
        "href": "#projects"
      },
      {
        "name": "Articles",
        "href": "#articles"
      },
      {
        "name": "Resume",
        "href": "#resume"
      },
      {
        "name": "Contact",
        "href": "#contact"
      }
    ]
  }
}

我的期望是，這應該作業，因為<NavigationItem />正在接收的物件（navItem），并有必要的型別宣告props（props: {name: string, href: string }）。

我在這里想念什么？

uj5u.com熱心網友回復：

在您的 中NavigationItem.tsx，您期待一個只有name和href

但是，當您使用NavigationItem.tsxin 時Navigation.tsx，您將在名為 的屬性中傳遞它item。所以，編輯你的NavigationItem.tsx

const NavigationItem = (props: {item:{name: string, href: string }}): JSX.Element => {
 return <a href={props.item.href}>{props.item.name}</a>;
};

export default NavigationItem;

或者，編輯NavigationItem在Navigation.tsx這樣的

<NavigationItem {...navItem} />

uj5u.com熱心網友回復：

您期望一個物件為：

{ name: string; href: string; }

并傳遞為：

{ item: { name: string; href: string; }; }

1）它們的型別都不同，所以你可以做的是：

<NavigationItem item={navItem} />

并期望：

interface IItem {     // IItemp type contains name and href
    name: string,
    href: string
}

interface INavigationItemProps {
    item: IItem      // Expecting an item of type IItem
}

// NavigationItem.tsx
const NavigationItem = (props: INavigationItemProps): JSX.Element => {
    return <a href={props.item.name}>{props.item.href}</a>;  // NOTICE
};

2）你可以通過just nameand hrefas：

<NavigationItem { ...item } />

和

// NavigationItem.tsx
const NavigationItem = (props: { name: string, href: string }): JSX.Element => {
    return <a href={props.href}>{props.name}</a>;
};

標籤：

上一篇：回傳泛型引數的默認值

下一篇：如何縮小字串和正則運算式的聯合？