javascript - 不可分配给类型“IntrinsicAttributes”(React.js 和 TypeScript.js)

Question

我正在尝试在 react 中创建组件。我处于学习模式。所以可能我做的完全错误。下面是我的代码

import * as React from 'react'

import styles from './MegaMenu.module.scss'

interface IMenu {
  name: string
  link: string
  subitem?: IMenu[]
}

let menus: IMenu[]
menus = [
  {
    name: "Home",
    link: "#"
  },
  {
    name: "About Us",
    link: "#"
  },
  {
    name: "Products",
    link: "#",
    subitem: [
      {
        name: "SubItem 1",
        link: "#",
        subitem: [
          {
            name: "Sub-SubItem1",
            link: "#"
          },
          {
            name: "Sub-SubItem2",
            link: "#"
          }
        ]
      },
      {
        name: "SubItem 2",
        link: "#"
      }
    ]
  },
  {
    name: "Services",
    link: "#",
    subitem: [
      {
        name: "SubItem 1",
        link: "#"
      },
      {
        name: "SubItem 2",
        link: "#"
      }
    ]
  }
]

class MegaMenu extends React.Component {
  public render() {
    return (
      <div className={styles.MegaMenu}>
        <div className={styles["menu-container"]}>
          <div className={styles.menu}>
            <MenuList Options={menus} />
          </div>
        </div>
      </div>
    )
  }
}

const MenuList = (Options: IMenu[]) => {
  return (
    <ul>
      {
        Options.map((Option: IMenu) => (
          <li key="">
            <a href={Option.link}>{Option.name}</a>
            {/* Base Case */}
            {
              (Option.subitem && Option.subitem.length > 0) &&
              <MenuList Options={Option.subitem} />
            }
          </li>
        ))
      }
    </ul>
  )
}

export default MegaMenu

我收到以下错误

请有人帮助我

Answer 1

功能组件只能将 props 作为变量，因此您必须为 props 提供类型并像这样使用它。

interface IMenuListProps {
  options: IMenu[]
}

const MenuList = (props: IMenuListProps) => {
  return (
    <ul>
      {
        props.options.map((Option: IMenu) => (
          <li key="">
            <a href={Option.link}>{Option.name}</a>
            {/* Base Case */}
            {
              (Option.subitem && Option.subitem.length > 0) &&
              <MenuList options={Option.subitem} />
            }
          </li>
        ))
      }
    </ul>
  )
}