11.2.基础内容-组件

套用主题

欢迎来到我的网站

组件

Astro 组件是 Astro 项目的基础构建模块。它们是纯 HTML、无需客户端运行时的模板组件。你可以通过文件扩展名 .astro 来识别 Astro 组件。Astro 组件会包含一些可在页面中复用的 UI，如 header 或简介。

Astro 组件最重要的一点是它们不会在客户端上渲染。构建时或使用服务器端渲染（SSR）按需呈现为 HTML。

当你的 Astro 组件确实需要客户端交互性时，你可以添加 标准 HTML <script> 标签 或 UI 框架组件。

组件概述

两个主要部分所组成的——组件 script和 组件模板

---
// 组件脚本（JavaScript）
---
<!-- 组件模板（HTML + JS 表达式）-->

组件脚本

围栏（---）来识别 Astro 组件中的组件脚本(叫做 frontmatter)。它的内容不会出现在用户浏览器中.

使用组件脚本来编写渲染模板所需 JavaScript 代码。这可以包括：

导入其他 Astro 组件
导入其他框架组件，如 React
导入数据，如 JSON 文件
从 API 或数据库中获取内容
创建你要在模板中引用的变量

---
import SomeAstroComponent from '../components/SomeAstroComponent.astro';
import SomeReactComponent from '../components/SomeReactComponent.jsx';
import someData from '../data/pokemon.json';

// 访问传入的组件参数，如 `<X title="Hello, World"/>`
const { title } = Astro.props;
// 获取外部数据，甚至可以从私有 API 和数据库中获取
const data = await fetch ('SOME_SECRET_API_URL/users').then (r => r.json ());
---
<!-- 你的模板在这！ -->

组件模板

组件脚本下面的是组件模板,组件模板决定了你的组件的 HTML 输出。

---
// 你的组件脚本在这！
import Banner from '../components/Banner.astro';
import ReactPokemonComponent from '../components/ReactPokemonComponent.jsx';
const myFavoritePokemon = [/* ... */];
const { title } = Astro.props;
---
<!-- 支持 HTML 注释！ -->
{/* JS注释语法也是有效的！ */}

<Banner />
<h1>你好，世界！</h1>

<!-- 使用组件脚本中的 props 和其他变量： -->
<p>{title}</p>

<!-- 包括其他带有 `client:` 指令的激活组件： -->
<ReactPokemonComponent client:visible />

<!-- 混合 HTML 和 JavaScript 表达式，类似于 JSX： -->
<ul>
  {myFavoritePokemon.map ((data) => <li>{data.name}</li>)}
</ul>

<!-- 使用模板指令从多个字符串甚至对象来构建类名！ -->
<p class:list={["add", "dynamic", {classNames: true}]} />

基于组件的设计

组件的设计是为了可复用和可组合。

---
import Button from './Button.astro';
---
<div>
  <Button title="按钮 1" />
  <Button title="按钮 2" />
  <Button title="按钮 3" />
</div>

组件参数

Astro 组件可以定义和接受参数。然后，这些参数可用于组件模板以呈现 HTML。可以在 frontmatter script 中的 Astro.props 中使用。

这是一个接收 greeting 和 name 参数的组件示例。请注意，要接收的参数是从全局 Astro.props 对象中解构的。

---
// 使用：<GreetingHeadline greeting="你好" name="朋友" />
const { greeting, name } = Astro.props
---
<h2>{greeting}，{name}!</h2>

当该组件在其他 Astro 组件、布局或页面中导入并渲染时，可以将这些 props 作为属性传递：

---
import GreetingHeadline from './GreetingHeadline.astro';
const name = "Astro";
---
<h1>Greeting Card</h1>
<GreetingHeadline greeting="嗨" name={name} />
<p>希望你有美好的一天！</p>

插槽

<slot /> 元素是嵌入外部 HTML 内容的占位符，你可以将其他文件中的子元素注入（或“嵌入”）到组件模板中。

默认情况下，传递给组件的所有子元素都将呈现在 <slot /> 中。

---
import Header from './Header.astro';
import Logo from './Logo.astro';
import Footer from './Footer.astro';

const { title } = Astro.props;
---
<div id="content-wrapper">
  <Header />
  <Logo />
  <h1>{title}</h1>
  <slot />  <!-- 子项会在这 -->
  <Footer />
</div>

---
import Wrapper from '../components/Wrapper.astro';
---
<Wrapper title="Fred 的页面">
  <h2>关于 Fred 的一切</h2>
  <p>这里有一些关于 Fred 的东西。</p>
</Wrapper>

这种模式是 Astro 布局组件的基础：整个 HTML 内容的页面可以用 <SomeLayoutComponent></SomeLayoutComponent> 标签围起来并发送到组件，以在那里定义的公共页面元素中呈现。

命名插槽

允许你仅将具有相应插槽名称的 HTML 元素传递到插槽的位置。

---
import Header from './Header.astro';
import Logo from './Logo.astro';
import Footer from './Footer.astro';

const { title } = Astro.props;
---
<div id="content-wrapper">
  <Header />
  <slot name="after-header" />  <!--  带有 `slot="after-header"` 属性的子项在这 -->
  <Logo />
  <h1>{title}</h1>
  <slot />  <!--  没有 `slot` 或有 `slot="default"` 属性的子项在这 -->
  <Footer />
  <slot name="after-footer" />  <!--  带有 `slot="after-footer"` 属性的子项在这 -->
</div>