框架组件

在不牺牲你最喜欢的组件框架的情况下构建你的 Astro 网站。使用你选择的 UI 框架创建 Astro islands。

¥Build your Astro website without sacrificing your favorite component framework. Create Astro islands with the UI frameworks of your choice.

官方 UI 框架集成

¥Official UI Framework Integrations

Astro 支持各种流行框架，包括 React、Preact、Svelte、Vue、SolidJS、AlpineJS 和点燃，并具有官方集成。

¥Astro supports a variety of popular frameworks including React, Preact, Svelte, Vue, SolidJS, AlpineJS and Lit with official integrations.

在我们的集成目录中找到更多社区维护的框架集成（例如 Angular、Qwik、Elm）。

¥Find even more community-maintained framework integrations (e.g. Angular, Qwik, Elm) in our integrations directory.

UI Frameworks

安装集成

¥Installing Integrations

可以在你的项目中安装和配置这些 Astro 集成中的一个或多个。

¥One or several of these Astro integrations can be installed and configured in your project.

请参阅集成指南以了解有关安装和配置 Astro 集成的更多详细信息。

¥See the Integrations Guide for more details on installing and configuring Astro integrations.

使用框架组件

¥Using Framework Components

在 Astro 页面、布局和组件中使用 JavaScript 框架组件，就像 Astro 组件一样！你的所有组件都可以在 /src/components 中共存，或者可以按照你喜欢的任何方式进行组织。

¥Use your JavaScript framework components in your Astro pages, layouts and components just like Astro components! All your components can live together in /src/components, or can be organized in any way you like.

要使用框架组件，请从 Astro 组件脚本中的相对路径导入它。然后，将该组件与组件模板中的其他组件、HTML 元素和类似 JSX 的表达式一起使用。

¥To use a framework component, import it from its relative path in your Astro component script. Then, use the component alongside other components, HTML elements and JSX-like expressions in the component template.

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

默认情况下，你的框架组件只会在服务器上渲染为静态 HTML。这对于模板化非交互式组件非常有用，并且可以避免向客户端发送任何不必要的 JavaScript。

¥By default, your framework components will only render on the server, as static HTML. This is useful for templating components that are not interactive and avoids sending any unnecessary JavaScript to the client.

混合互动组件

¥Hydrating Interactive Components

可以使用 client:* 指令使框架组件具有交互性（水合）。这些组件属性决定组件的 JavaScript 何时应发送到浏览器。

¥A framework component can be made interactive (hydrated) using a client:* directive. These are component attributes that determine when your component’s JavaScript should be sent to the browser.

对于除 client:only 之外的所有客户端指令，你的组件将首先在服务器上渲染以生成静态 HTML。组件 JavaScript 将根据你选择的指令发送到浏览器。然后该组件将水合并变得具有交互性。

¥With all client directives except client:only, your component will first render on the server to generate static HTML. Component JavaScript will be sent to the browser according to the directive you chose. The component will then hydrate and become interactive.

---
// Example: hydrating framework components in the browser.
import InteractiveButton from '../components/InteractiveButton.jsx';
import InteractiveCounter from '../components/InteractiveCounter.jsx';
import InteractiveModal from '../components/InteractiveModal.svelte';
---
<!-- This component's JS will begin importing when the page loads -->
<InteractiveButton client:load />

<!-- This component's JS will not be sent to the client until
the user scrolls down and the component is visible on the page -->
<InteractiveCounter client:visible />

<!-- This component won't render on the server, but will render on the client when the page loads -->
<InteractiveModal client:only="svelte" />

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

¥The JavaScript framework (React, Svelte, etc.) needed to render the component will be sent to the browser along with the component’s own JavaScript. If two or more components on a page use the same framework, the framework will only be sent once.

可用的混合指令

¥Available Hydration Directives

UI 框架组件有多种水合指令可用：client:load、client:idle、client:visible、client:media={QUERY} 和 client:only={FRAMEWORK}。

¥There are several hydration directives available for UI framework components: client:load, client:idle, client:visible, client:media={QUERY} and client:only={FRAMEWORK}.

See our directives reference page for a full description of these hydration directives, and their usage.

混合框架

¥Mixing Frameworks

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

¥You can import and render components from multiple frameworks in the same Astro component.

---
// Example: Mixing multiple framework components on the same page.
import MyReactComponent from '../components/MyReactComponent.jsx';
import MySvelteComponent from '../components/MySvelteComponent.svelte';
import MyVueComponent from '../components/MyVueComponent.vue';
---
<div>
  <MySvelteComponent />
  <MyReactComponent />
  <MyVueComponent />
</div>

将属性传递给框架组件

¥Passing Props to Framework Components

你可以将属性从 Astro 组件传递到框架组件：

¥You can pass props from Astro components to framework components:

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

将子组件传递给框架组件

¥Passing Children to Framework Components

在 Astro 组件内部，你可以将子组件传递给框架组件。每个框架对于如何引用这些子框架都有自己的模式：React、Preact 和 Solid 都使用名为 children 的特殊 prop，而 Svelte 和 Vue 使用 <slot /> 元素。

¥Inside of an Astro component, you can pass children to framework components. Each framework has its own patterns for how to reference these children: React, Preact, and Solid all use a special prop named children, while Svelte and Vue use the <slot /> element.

---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
---
<MyReactSidebar>
  <p>Here is a sidebar with some text and a button.</p>
</MyReactSidebar>

此外，你可以使用命名插槽将特定子项分组在一起。

¥Additionally, you can use Named Slots to group specific children together.

对于 React、Preact 和 Solid，这些插槽将转换为顶层 prop。使用 kebab-case 的插槽名称将转换为 camelCase。

¥For React, Preact, and Solid, these slots will be converted to a top-level prop. Slot names using kebab-case will be converted to camelCase.

---
import MySidebar from '../components/MySidebar.jsx';
---
<MySidebar>
  <h2 slot="title">Menu</h2>
  <p>Here is a sidebar with some text and a button.</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>

export default function MySidebar(props) {
  return (
    <aside>
      <header>{props.title}</header>
      <main>{props.children}</main>
      <footer>{props.socialLinks}</footer>
    </aside>
  )
}

对于 Svelte 和 Vue，可以使用带有 name 属性的 <slot> 元素来引用这些槽。使用 kebab-case 的插槽名称将被保留。

¥For Svelte and Vue these slots can be referenced using a <slot> element with the name attribute. Slot names using kebab-case will be preserved.

<aside>
  <header><slot name="title" /></header>
  <main><slot /></main>
  <footer><slot name="social-links" /></footer>
</aside>

嵌套框架组件

¥Nesting Framework Components

在 Astro 文件内部，框架组件子组件也可以是水合组件。这意味着你可以递归地嵌套来自任何这些框架的组件。

¥Inside of an Astro file, framework component children can also be hydrated components. This means that you can recursively nest components from any of these frameworks.

---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
import MyReactButton from '../components/MyReactButton.jsx';
import MySvelteButton from '../components/MySvelteButton.svelte';
---
<MyReactSidebar>
  <p>Here is a sidebar with some text and a button.</p>
  <div slot="actions">
    <MyReactButton client:idle />
    <MySvelteButton client:idle />
  </div>
</MyReactSidebar>

这允许你在你喜欢的 JavaScript 框架中构建整个 “apps” 并通过父组件将它们渲染到 Astro 页面。

¥This allows you to build entire “apps” in your preferred JavaScript framework and render them, via a parent component, to an Astro page.

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

¥Can I use Astro Components inside my Framework Components?

任何 UI 框架组件都会成为该框架的 “island”。这些组件必须完全编写为该框架的有效代码，仅使用其自己的导入和包。你无法在 UI 框架组件中导入 .astro 组件（例如 .jsx 或 .svelte）。

¥Any UI framework component becomes an “island” of that framework. These components must be written entirely as valid code for that framework, using only its own imports and packages. You cannot import .astro components in a UI framework component (e.g. .jsx or .svelte).

但是，你可以使用 Astro <slot /> 图案将 Astro 组件生成的静态内容作为子项传递给 .astro 组件内的框架组件。

¥You can, however, use the Astro <slot /> pattern to pass static content generated by Astro components as children to your framework components inside an .astro component.

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

我可以混合 Astro 组件吗？

¥Can I Hydrate Astro Components?

如果你尝试使用 client: 改性剂水合 Astro 组分，你将收到错误消息。

¥If you try to hydrate an Astro component with a client: modifier, you will get an error.

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

¥Astro components are HTML-only templating components with no client-side runtime. But, you can use a <script> tag in your Astro component template to send JavaScript to the browser that executes in the global scope.

Learn more about client-side <script> tags in Astro components

框架组件

官方 UI 框架集成

UI Frameworks

@astrojs/alpinejs

@astrojs/lit

@astrojs/preact

@astrojs/react

@astrojs/solid⁠-⁠js

@astrojs/svelte

@astrojs/vue