Übersetzung: React – TypeScript destrukturierende Zuweisung von Requisiten

Question

Ich habe eine Funktion

Exportfunktion getSubjectsForStudent(data: any) : any[]

Das „Datenargument“ ist das, was ich von einer externen Quelle erhalte, und die Definition eines starken Typs ist nicht möglich. „return“ ist von „data“ abgeleitet und hat daher ebenfalls den Typ „any“.

Eine „Haupt“-Komponente übergibt „return“ an eine „untergeordnete“ Komponente, wie folgt:

;

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

Und in der MainCategories-Komponente

Standardfunktion exportieren MainCategories(props: any) {
    const tmp = props.subjects;
    ...

Übersetzung: Es funktioniert, kein Problem.

Aber ich möchte:

export default function MainCategories( {subjects} ) {

Kann jemand helfen?

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;