Question

因此，我有一个基本的可迭代组件Link，它呈现了一些链接。他被包裹在Links组件中，该组件对其进行迭代。不幸的是，我遇到的问题是Typescript在key组件迭代中不了解如何使用Link component上的Links道具。

我会为您提供帮助！

错误消息：

输入'{键：数字； }”不能分配给“ ILink”类型。

类型'{key：number;类型中缺少属性'title'； }'。

我的代码：

import React from 'react'
import styles from './index.cssmodule.scss'

interface ILinks {
  links: object[]
}

interface ILink {
  title: string
  label: string
  href: string
  icon: string
}

// Link Component
const Link: React.SFC<ILink> = ({ title, label, href, icon }) => (
  <a href={href + label}>
    <i className={icon} />
    <span>{title}</span>
  </a>
)

// Links Component that wraps Link
const Links: React.SFC<ILinks> = ({ links = [] }) => {    
  const bulidLinksList = (): JSX.Element[] => (
    links.map((link, i) => (
      <Link key={i} {...link} /> // ERROR Type '{ key: number; }' is not assignable to type ILink
    ))
  )

  return (
    <div className={styles.linksContainer}>
      {bulidLinksList()}
    </div>
  )
}

export default Links

Answer 1

您正在这样定义接口Link：

interface ILink {
  title: string
  label: string
  href: string
  icon: string
}

然后，您尝试分配key={i}，最终它只是像这样的对象

{
  key: 123;
}

您尚未在key界面中定义ILink。这就是TypeScript抱怨的原因。

Answer 2

尝试使用React.ReactElement代替React.SFC，ReactElement将为您提供key和ref道具

const Link: React.ReactElement<ILink> = ({ title, label, href, icon }) => (
  <a href={href + label}>
    <i className={icon} />
    <span>{title}</span>
  </a>
)

// Links Component that wraps Link
const Links: React.ReactElement<ILinks> = ({ links = [] }) => {    
  const bulidLinksList = (): JSX.Element[] => (
    links.map((link, i) => (
      <Link key={i} {...link} />
    ))
  )

  return (
    <div className={styles.linksContainer}>
      {bulidLinksList()}
    </div>
  )
}

Answer 3

这里的基本问题是在线上您不使用ReactElement，而是使用函数功能接口React.SFC来生成ReactElement。该功能期望您这样定义的接口接口ILink { 标题：字符串标签：字符串 href：字符串图标：字符串 }

TypeScript / React。错误类型'{键：数字； }'不可分配给ILink类型（SFC组件）

3 个答案: