跳转到内容
Astro Astro

框架组件

你可以在无需舍弃你所喜欢的组件框架的情况下使用 Astro 构建站点。

Astro 支持多个受欢迎的框架，包括 React、Preact、Svelte、Vue、SolidJS、AlpineJS 和 Lit。

安装集成

Astro 附带了 集成选项，包括 React、Preact、Svelte、Vue、SolidJS、AlpineJS 和 Lit。你可以在你的项目中安装和配置一个或多个 Astro 集成。

⚙️ 阅读集成指引获取更多关于安装和配置 Astro 集成和信息。

⚙️ 想要看看你选择的框架的示例？访问 astro.new 然后选择一个框架模板。

使用框架组件

在 Astro 页面、布局和组件中就像 Astro 组件一样使用你的 JavaScript 框架组件。所有组件都可放在 /src/components 目录中，或者你也可以放在任何你喜欢的地方。

要使用框架组件，你需要在 Astro 组件脚本中使用相对路径导入它们。然后在其他组件、HTML 元素和类 JSX 表达式中使用它们。

src/pages/static-components.astro
---
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<html>
  <body>
    <h1>Use React components directly in Astro!</h1>
    <MyReactComponent />
  </body>
</html>

默认情况下，你的框架组件将渲染为静态 HTML。这对于模板组件而言非常有用，它不需要交互和避免分发没用的 JavaScript 给用户。

激活组件

框架组件可以使用 client:* 指令来激活（hydrate）。这些是用于确定何时将组件的 JavaScript 发送到浏览器的组件属性。

使用除 client:only 以外的所有客户端指令，你的组件将首先在服务器上渲染以生成静态 HTML。根据你选择的指令，将向浏览器发送组件 JavaScript。然后组件将被激活并变成可交互式的。

src/pages/interactive-components.astro
---
// 示例：在浏览器中激活框架组件。
import InteractiveButton from '../components/InteractiveButton.jsx';
import InteractiveCounter from '../components/InteractiveCounter.jsx';
import InteractiveModal from "../components/InteractiveModal.svelte"
---
<!-- 该组件的 JS 将在页面加载开始时导入 -->
<InteractiveButton client:load />


<!-- 该组件的 JS 将不会发送给客户端，直到用户向下滚动到该组件在页面上可见时 -->
<InteractiveCounter client:visible />


<!-- 这个组件不会在服务端渲染, 但是在页面加载时将渲染在客户端 -->
<InteractiveModal client:only="svelte" />

组件渲染所需的 JavaScript 框架（React、Svelte 等）将与组件自己的 JavaScript 一起发送到浏览器。如果页面上的两个或多个组件使用相同的框架，则该框架将只发送一次。

可用激活指令

这里有几个适用于 UI 框架组件的激活指令：client:load、client:idle、client:visible、client:media={QUERY} 和 client:only={FRAMEWORK}。

📚 查看指令参考页面获取这些激活指令的详细描述以及用法。

混合框架

你可以在同一个 Astro 组件中导入并渲染来自多个框架的组件。

src/pages/mixing-frameworks.astro
---
// 示例：在同一个页面混合多个框架的组件。
import MyReactComponent from '../components/MyReactComponent.jsx';
import MySvelteComponent from '../components/MySvelteComponent.svelte';
import MyVueComponent from '../components/MyVueComponent.vue';
---
<div>
  <MySvelteComponent />
  <MyReactComponent />
  <MyVueComponent />
</div>

向框架组件传递 Props

你可以从 Astro 组件向框架组件传递 props：

src/pages/frameworks-props.astro
---
import TodoList from '../components/TodoList.jsx';
import Counter from '../components/Counter.svelte';
---
<div>
  <TodoList initialTodos={["learn Astro", "review PRs"]} />
  <Counter startingCount={1} />
</div>

向框架组件传递子组件

在 Astro 组件中，你可以向框架组件传递子组件。每个框架都有自己的模式来引用这些子组件：React、Preact 和 Solid 均使用一个特殊的属性名 children，而 Svelte 和 Vue 则使用 <slot /> 元素。

src/pages/component-children.astro
---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
---
<MyReactSidebar>
  <p>这里是一个带有一些文字和一个按钮的侧边栏。</p>
</MyReactSidebar>

另外你可以使用命名插槽来区分特定的子组件。

针对 React、Preact 和 Solid 的插槽都会转换成顶级属性。使用 kebab-case 的插槽名会转换成 camelCase。

src/pages/named-slots.astro
---
import MySidebar from '../components/MySidebar.jsx';
---
<MySidebar>
  <h2 slot="title">菜单</h2>
  <p>这里是一个带有一些文字和一个按钮的侧边栏。</p>
  <ul slot="social-links">
    <li><a href="https://twitter.com/astrodotbuild">Twitter</a></li>
    <li><a href="https://github.com/withastro">GitHub</a></li>
  </ul>
</MySidebar>
src/components/MySidebar.jsx
export default function MySidebar(props) {
  return (
    <aside>
      <header>{props.title}</header>
      <main>{props.children}</main>
      <footer>{props.socialLinks}</footer>
    </aside>
  )
}

针对 Svelte 和 Vue 的插槽会使用 <slot> 元素进行引用。而使用 kebab-case 的插槽名会保留。

src/components/MySidebar.svelte
<aside>
  <header><slot name="title" /></header>
  <main><slot /></main>
  <footer><slot name="social-links" /></footer>
</aside>

嵌套框架组件

在 Astro 文件中，框架组件子项也是激活组件。这意味着你可以嵌套地使用这些框架组件。

src/pages/nested-components.astro
---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
import MyReactButton from '../components/MyReactButton.jsx';
import MySvelteButton from '../components/MySvelteButton.svelte';
---


<MyReactSidebar>
  <p>这里是一个带有一些文字和一个按钮的侧边栏。</p>
  <div slot="actions">
    <MyReactButton client:idle />
    <MySvelteButton client:idle />
  </div>
</MyReactSidebar>

这使得你可以用喜欢的 JavaScript 框架中建立整个应用，并通过在 Astro 页面中使用父组件来渲染它们。

我可以在我的框架组件中使用 Astro 组件吗？

任何 UI 框架组件都会成为该框架的一个“孤岛”。这些组件必须完全作为该框架的有效代码来编写，只使用它自己的导入和包。你不能在一个 UI 框架组件（如 .jsx 或 .svelte）中导入 .astro 组件。

不过你可以在.astro组件内使用 Astro <slot /> 模式将 Astro 组件生成的静态内容作为子项传递给框架组件。

src/pages/astro-children.astro
---
import MyReactComponent from  '../components/MyReactComponent.jsx';
import MyAstroComponent from '../components/MyAstroComponent.astro';
---
<MyReactComponent>
  <MyAstroComponent slot="name" />
</MyReactComponent>

我可以激活 Astro 组件吗？

如果你试图使用 client: 修改器激活 Astro 组件，你将收到错误消息。

Astro 组件是纯 HTML 的模板组件，没有客户端运行时。但是，你可以在 Astro 组件模板中使用 <script> 标签，向浏览器发送在全局范围内执行的 JavaScript。

📚 了解更多关于 Astro 组件中的客户端 <script> 的信息