我有一个功能:
export function getSubjectsForStudent(data: any) : any[]
“数据参数”我从外部源收到,定义强类型是不可行的。 “return”源自“data”,因此它也是any类型。
“主”组件将“返回”传递给“子”组件,如下所示:
<MainCategories subjects={getSubjectsForStudent(data)} />
在主要类别中
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;
您需要添加 Props 的类型/接口 - 然后你就可以通过解构来获得主题。
interface Props {
subjects: any
}
export default function MainCategories({ subjects }: Props) {
const tmp = props.subjects;
...
所有其他答案都使用外部
interface
声明,这是一个很好的做法。但对于每个寻求单行解构的人来说,这里是:
function Foo({name}: {name: string}) {
return <div>{name}</div>;
}