React-TypeScript分解道具

问题描述

我有一个功能：

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

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

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

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

在MainCategories中

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

可以，可以。

但是我想要
导出默认函数MainCategories（ {subjects} ）{

有人可以帮忙吗？

解决方法

我经常使用这种模式来做，但是要点是定义道具。

import { FunctionComponent } from 'react';

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

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

export default MainCategories;

,

您需要添加道具的类型/界面- 然后，您将可以通过破坏获取主题。

interface Props {
  subjects: any
}

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