javascript - typescript / react 。错误类型 '{ key: number; }' 不可分配给类型 ILink(SFC 组件)

Question

所以，我有一个基本的可迭代组件 Link呈现一些链接。他沉浸在 Links 中迭代他的组件。不幸的是，我遇到的问题是 Typescript不明白如何处理 key支持 Link component在 Links组件迭代。

我会感激任何帮助!

错误信息:

Type '{ key: number; }' is not assignable to type 'ILink'.

Property 'title' is missing in type '{ key: number; }'.

我的代码:

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

尝试使用 React.ReactElement 而不是 React.SFC，ReactElement 会给你 key 和 ref Prop

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