React TypeScript默认的Props类型

Question

我在输入这个组件时遇到了一些问题:

type Props = {
collectionName: string;
};
export const CollectionName = ({ title, ...rest }: Props) => {
return !collectionName || collectionName === 'null' ? (
<TitlePlaceHolder {...rest} />
) : rest.heading ? (
<Heading>{title}</Heading>
) : (
<Text fontSize="xs" color="textlight.tertiary" {...rest}>
{title}
</Text>
);
};

我需要放些什么来让它兼容所有的东西?

Answer 1

你需要确保在你的类型中定义了你的props，你也可以使用…当你知道它会有什么道具时再休息

type Props = {
collectionName: string;
title: string;
heading?: boolean;
};
export const CollectionName = ({ collectionName, title, heading }: Props) => {
if (!collectionName) return <TitlePlaceHolder />;
else if (heading) return <Heading>{title}</Heading>;
return (
<Text fontSize='xs' color='textlight.tertiary'>
{title}
</Text>
);
};