React - 道具的 TypeScript 解構

Question

我有一個功能：

 export function getSubjectsForStudent(data: any) : any[]

“數據參數”我從外部來源收到，定義強類型是不可行的。 “return”源自“data”，因此它的類型也是 any 。

“主”組件將“返回”傳遞給“子”組件，如下所示：

<MainCategories subjects={getSubjectsForStudent(data)} />

在 MainCategories 中

export default function MainCategories(props: any) {
    const tmp = props.subjects;
    ...

它有效並且沒問題。

但我想要
導出默認函數 MainCategories( {subjects} ) {

有人可以幫忙嗎？

Answer 1

我經常使用這種模式來做到這一點，但重點是定義道具。

import { FunctionComponent } from 'react';

interface Props {
  // In your case
  subjects: any
}

const MainCategories: FunctionComponent<Props> = ({subjects}) => (
  ...
);

export default MainCategories;

Answer 2

您需要添加 Props 的類型/接口 - 然后您將能夠通過解構獲得主題。

interface Props {
  subjects: any
}

export default function MainCategories({ subjects }: Props) {
    const tmp = props.subjects;
    ...