0

在我们公司，我们将原子设计用于我们的设计系统（使用 React 和 Styled Components 作为我们的样式解决方案），以便将我们的 UI 分解为原子、分子和有机体

我对何时应将原子归类为原子或是否应位于其父域内有疑问。

您可以在此Material UI Card示例中看到此类组合的示例（它不使用原子设计，但无论如何您都可以理解）。

所以，想象下面的例子，你有一个 Card Atom（因为它只是一个包装器，它返回一个带有子元素的样式化 HTML 标签）：

const Card = ({children}) => <StyledWrapper>{children}</StyledWrapper>

还定义了一些与 一起使用的子级Card，例如和CardHeader，它们都是可选样式的包装器，如果需要，它们作为子级传递。CardBodyCardFooter

那么，在这个例子中哪种方法是正确的呢？

  • CardHeader，CardBody并且CardFooter应该被归类为原子，在Card域之外（意味着它的文件夹）
-- atoms
  -- Card
  -- CardHeader
  -- CardBody
  -- CardFooter
  • CardHeader,CardBody并且CardFooter应该放在Card域内，因为它们不可重用（意味着它们被设计为仅与Card原子一起使用），并且应该与 一起导出Card，所以这个例子中唯一的原子是Card
-- atoms
  -- Card
    -- CardHeader
    -- CardBody
    -- CardFooter
4

1 回答 1

2

简单的答案：后者。

-- atoms
  -- Card
    -- CardHeader
    -- CardBody
    -- CardFooter

正如您所说，CardHeader,CardBody不能在域外重用Card。因此，将这些子组件与卡片放在同一级别是没有意义的。专业提示：您可以封装这些子组件，以便在 Card 下导出它们。例如Card.Header，Card.Body等等，使事情更明显。

另一点可能对您有所帮助：在我的项目中，我不假设 Card 是一个原子，而是一个分子。原子是构建块。卡片是文本、图像和按钮等较小构建块的集合。因此，它作为分子更有意义。

于 2021-04-25T20:49:32.350 回答