接口道具声明答案

【问题标题】：Interface props declaration接口道具声明
【发布时间】：2021-12-01 19:01:34
【问题描述】：

我是 Typescript 的新手，我被一些界面道具困住了。有一个错误提示“Property 'services' does not exist on type 'IntrinsicAttributes & AkkordionProps[]”，我不明白，因为我在我的接口声明中看到了服务，所以，我的头晕了现在。

这里是调用BusinessPage组件的主要组件：

<BusinessPage services={services} />

这里是 BusinessPage.tsx 组件：

  export interface AkkordionListProps {
  services: {
    name: string
    services: {
      name: string
      content: string
      link: string
    }[]
  }
}

export interface AkkordionProps {
  services: AkkordionListProps[]
}

export const BusinessPage = (services: AkkordionProps[]): JSX.Element => {}

谢谢:)

【问题讨论】：

标签： reactjs typescript interface typeerror

【解决方案1】：

BUsinessPage 是反应组件。 React 总是期望一个对象作为 prop 而不是数组：

import React from 'react'

export interface AkkordionListProps {
    services: {
        name: string
        services: {
            name: string
            content: string
            link: string
        }[]
    }
}

export interface AkkordionProps {
    services: AkkordionListProps[]
}

export const BusinessPage = (props: AkkordionProps): JSX.Element => {
    return <div></div>
}

Playground

【讨论】：