React - 道具的 TypeScript 解构

Question

我有一个功能：

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

我从外部来源收到的“数据参数”，定义强类型是不可行的。 “return”派生自“数据”，因此它也是任何类型。

“主”组件将“return”传递给“子”组件，如下所示：

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

并且在 MainCategories

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

有效，没问题。

但我想要
导出默认函数 MainCategories( {subjects} ) {

有人可以帮忙吗？

Answer 1

您需要添加 type/interface 个道具 - 然后你就可以通过解构得到主题。

interface Props {
  subjects: any
}

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

Answer 2

我经常使用这个模式来做那个，但重点是定义道具。

import { FunctionComponent } from 'react';

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

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

export default MainCategories;

React - 道具的 TypeScript 解构

React - TypeScript destructuring of props

destructuring

typescript

reactjs