代码之家 › 专栏 › 技术社区 › strumpy_strudel

属性“item”在类型“IntrinsicattAttributes&{name:string;href:string;}”上不存在

typescript reactjs

0

strumpy_strudel · 技术社区 · 4 年前

我正在学习在个人项目中使用打字脚本。我很难解决这个错误:

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 } ).

我错过了什么?

1 回复 | 直到 4 年前

1

lokprakash 4 年前

在你的 NavigationItem.tsx ,您期待的道具只有 name 和 href

但是,当你使用 导航项。tsx 在里面 Navigation.tsx ,则将其传递到名为 item .所以,编辑你的 导航项。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 在里面 航行tsx 这样地

<NavigationItem {...navItem} />

2

1

DecPK 4 年前

您希望对象为:

{ 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) 你可以通过 name 和 href 作为:

<NavigationItem { ...item } />

和

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