reactjs 何时将两个组件合并为一个选项？

js5cn81o 于 12个月前发布在 React

关注(0)|答案(2)|浏览(111)

我正在构建一个组件库，我有两个徽标：
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>
  );
}

你觉得怎么样？两个出口还是一个（当前）？

reactjs

来源：https://stackoverflow.com/questions/77294832/when-to-put-two-components-into-one-with-an-option

2条答案

按热度按时间

nnt7mjpx1#

这实际上是一个个人/项目一致性的选择。我不认为这是一个正确或错误的决定。由于您使用的是typescript，我认为在这种情况下创建一个Logo是完全可以接受的。如果它们用于非常不同的功能，可以考虑相应地命名它们。HeaderLogo、LogoIcon等。

赞(0）回复(0）举报 12个月前

bhmjp9jg2#

您可以将其保存在一个组件中，即父徽标组件和图像的条件，如下所示：

export function Logo({ knockout = false, type = 'primary' }: LogoProps){
    return (
        <LogoFilter whiten={knockout}>
            <svg xmlns={type == 'primary' 
                ? 
                  "http://www.w3.org/2000/svg" 
                : "http://www.w3.org/3000/svg"}
            >
            ...
            </svg>
        </LogoFilter>
    );
}

赞(0）回复(0）举报 12个月前

我来回答

reactjs 何时将两个组件合并为一个选项？

2条答案

相关问题

热门标签

最新问答