框架组件

在不牺牲你最喜欢的组件框架的情况下构建你的 Astro 网站。

英Build your Astro website without sacrificing your favorite component framework.

Astro 支持多种流行的框架，包括反应、Preact、Svelte、Vue、SolidJS、AlpineJS 和点燃。

英Astro supports a variety of popular frameworks including React, Preact, Svelte, Vue, SolidJS, AlpineJS and Lit.

安装集成

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

英Astro ships with optional integrations for React, Preact, Svelte, Vue, SolidJS, AlpineJS and Lit. One or several of these Astro integrations can be installed and configured in your project.

⚙️ 有关安装和配置 Astro 集成的更多详细信息，请查看集成指南。

英⚙️ View the Integrations Guide for more details on installing and configuring Astro integrations.

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

英⚙️ Want to see an example for the framework of your choice? Visit astro.new and select one of the framework templates.

使用框架组件

在 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.

混合互动组件

可以使用 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.

可用的混合指令

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.

混合框架

你可以在同一个 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>

:::caution 提醒只有 Astro 组件 (.astro) 可以包含来自多个框架的组件。 :::

将属性传递给框架组件

你可以将属性从 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>

将子组件传递给框架组件

在 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>

嵌套框架组件

在 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>

:::caution 提醒记住：框架组件文件本身（例如 .jsx，.svelte）不能混合多个框架。 :::

这允许你在你喜欢的 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.

:::note 注意 Astro 组件始终渲染为静态 HTML，即使它们包含水合的框架组件也是如此。这意味着你只能传递不执行任何 HTML 渲染的 props。将 React 的 “渲染属性” 从 Astro 组件传递到框架组件将不起作用，因为 Astro 组件无法提供此模式所需的客户端运行时行为。相反，请使用命名槽。 :::

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

任何 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 组件吗？

如果你尝试使用 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.

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

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