Atomic设计中如何避免螺旋钻？

Question

我最近有了一个新项目。该项目使用了原子设计，但之前参与该项目的开发人员并没有严格遵循该规则。分子和生物体与API（axios）有逻辑。在设计中，他们必须用道具来完成他们的功能，对吧？

所以我决定分离他们正在使用的逻辑。在工作的过程中，我产生了好奇心。采用 Atomic 设计制造的组件非常干净。我知道，但是支柱钻孔怎么样？

页面将道具传递给生物体。
生物体将支撑传递给分子和原子。
分子将支撑传递给原子。

Context API 就是为了解决这个问题而出现的，但这并不符合 Atomic 设计。

我是否误解了设计概念？

你们如何避免原子设计中的螺旋钻？我必须使用它吗？

Answer 1

我可以给你的建议是使用组件组合。

当前的建筑有很多道具钻孔

// Smart Component
function Payments() {
  const {cards, setAsDefault, paymentHistory, viewPaymentDetails} = usePayment();
  return(
    <PaymentsList cards={cards} setAsDefault={setAsDefault} paymentHistory={paymentHistory} viewPaymentDetails={viewPaymentDetails}/>
  )
}

// Organism
function PaymentsList({cards, setAsDefault, paymentHistory, viewPaymentDetails}) {
  return(
    <>
      <h1>This is your payment page with history of transactions and saved cards<h1/>
      <SavedCards cards={cards} setAsDefault={setAsDefault}>
      <HistoryOfPayments paymentHistory={paymentHistory} viewPaymentDetails={viewPaymentDetails}/> // Listing similar to SavedCards
    </>
  )
}

// Molecule
function SavedCards({cards, setAsDefault}) {
  return(
    <ul>
      {cards.map((card) => (<CardItem setAsDefault={setAsDefault}/ >))}
    </ul>
  )
}

// Atom
function CardItem({setAsDefault}) {
  return(<li onClick={setAsDefault}>Card 1</li>)
}

正如您在这里所看到的，组件 SavedCards 收到 setAsDefault 只是为了将其传递给其子 CardItem。 SavedCards 永远不需要这个道具。

我们可以通过组件组合来改进它：

有成分

// Smart Component
function Payments() {
  const {cards, setAsDefault, paymentHistory, viewPaymentDetails} = usePayment();
  return(
    <PaymentsList>
      <SavedCards cards={cards}>
        <CardItem setAsDefault={setAsDefault} />
      <SavedCards/>
      <HistoryOfPayments>
        <AnyComponentHere></AnyComponentHere>
      </HistoryOfPayments>
    <PaymentsList/>
  )
}

// Organism
function PaymentsList({children}) {
  return(
    <>
      <h1>This is your payment page with history of transactions and saved cards<h1/>
      {children}
    </>
  )
}

// Molecule
function SavedCards({children, cards}) {
  return(
    <ul>
      {cards.map((card) => children))}
    </ul>
  )
}

// Atom
function CardItem({setAsDefault}) {
  return(<li onClick={setAsDefault}>Card 1</li>)
}

总而言之，它看起来像这样：

<Organism>
    <Molecule>
        <Atom>{caption}</Atom>
    </Molecule>
</Organism>