我正在构建一个组件库，我有两个徽标：
Logo（大）和Logo（小）
它们看起来不同，将在不同的地方使用。
它们应该是两个独立的React组件。或者一个React组件，具有主要或次要选项。
它们有一个相似的特征。
export type LogoProps = {
knockout?: boolean;
type?: 'primary' | 'secondary';
};
export function Logo({ knockout = false, type = 'primary' }: LogoProps) {
return (
<LogoFilter whiten={knockout}>
{type == 'primary' && <PrimaryLogo />}
{type == 'secondary' && <SecondaryLogo />}
</LogoFilter>
);
}
function PrimaryLogo() {
return (
<svg xmlns="http://www.w3.org/2000/svg">
...
</svg>
);
}
export function SecondaryLogo() {
return (
<svg xmlns="http://www.w3.org/2000/svg">
...
</svg>
);
}你觉得怎么样？两个出口还是一个（当前）？
2条答案
按热度按时间nnt7mjpx1#
这实际上是一个个人/项目一致性的选择。我不认为这是一个正确或错误的决定。由于您使用的是typescript，我认为在这种情况下创建一个
Logo是完全可以接受的。如果它们用于非常不同的功能，可以考虑相应地命名它们。HeaderLogo、LogoIcon等。bhmjp9jg2#
您可以将其保存在一个组件中，即父徽标组件和图像的条件，如下所示：