翻譯：React - TypeScript對props進行解構賦值

Question

我有函數

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

"data argument" 是我從外部來源接收的，定義強型別並不可行。 "return" 是根據 "data" 推導出來的，所以它也是 any 類型。

一個"Main" 元件將"return" 傳給一個"child" 元件，像這樣：

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

而在 MainCategories 元件中，

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

翻譯：它可以工作，沒問題。

但我想要：

export default function MainCategories( {subjects} ) {

有人可以幫忙嗎？

Answer 1

你需要加入一個 Props 的類型或接口，然後你就可以透過解構來取得 subjects。

interface Props {
  subjects: any
}

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

Answer 2

我經常使用這種模式來實現這個，但主要的關鍵是定義props。

import { FunctionComponent } from 'react';

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

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

export default MainCategories;