我可以从父级向Astro组件传递额外的类吗

Question

我有一个现有的Astro组件，它的模板中已经包含了一些类；然而，我试图在另一个视图中重用此组件，并仅在该视图中更改其标头的颜色。

所以我读了一些文档，说我可以传递一个class道具，将类从父级添加到子级；然而，我不明白如何将现有类保留在组件中，然后重写某些内容或在现有类的基础上添加另一个类。

<ExpansionQuestion question={question.question}>
<Fragment slot="body" set:html={question.answer} />
</ExpansionQuestion>

ExpansionQuestion根元素：

<details
class="group bg-blue-gray duration-300 rounded-lg p-4 w-full shadow-md focus:outline-none focus:ring-0"
>

我只想在一个特定视图的details元素中添加一个不同的bg-secondary类，其余类在任何地方都应该保持不变。

有可能做到这一点吗？

Answer 1

这里的一个好方法是使用Astro的class:list指令。这样可以更容易地组合各种类。

在您的示例中，您可能会执行以下操作：

1. 将附加类传递给您使用它的组件(这里使用bg道具，但您可以将其用于任何情况)：

   <ExpansionQuestion question={question.question} bg="bg-secondary">
   <Fragment slot="body" set:html={question.answer} />
   </ExpansionQuestion>
   

2. 使用道具控制ExpansionQuestion.astro组件中的背景：

   ---
   const { bg } = Astro.props;
   ---
   <details
   class:list={[
   "group duration-300 rounded-lg p-4 w-full",
   "shadow-md focus:outline-none focus:ring-0",
   bg || "bg-blue-gray"
   ]}
   >
   

   Astro将自动组合class:list数组中的项目，在这种情况下，如果传递了bg道具，则将使用该道具，但如果没有传递道具，则默认为蓝灰色。

Answer 2

接受子组件中的class道具并将其应用于根元素。析构函数时，必须重命名它，因为class是JavaScript中的保留字。

子组件：

---
const { class: className } = Astro.props
---
<div class:list={['child-component', className]}>
Child component
</div>
<style>
.child-component {
border: 2px solid blue;
}
</style>

从父级使用：

---
import ChildComponent from '...'
---
<div class="parent">
<ChildComponent class="my-child-component"/>
</div>
<style>
.my-child-component {
background: red;
}
</style>

更多关于文档