跳转到内容

Astro 语法

如果你了解 HTML,那么你已经有能力编写第一个 Astro 组件了。

Astro 组件语法是 HTML 的超集。这个语法旨在让任何有编写 HTML 或 JSX 经验的人都感到熟悉 ,并增加了对组件和 JavaScript 表达式的支持。

你可以在 Astro 组件的两个代码围栏(---)之间的 frontmatter 组件脚本内部定义本地 JavaScript 变量。然后,可以使用类似 JSX 的表达式将这些变量注入到组件的 HTML 模板中!

可以使用花括号语法将局部变量添加到 HTML 中:

src/components/Variables.astro
---
const name = "Astro";
---
<div>
<h1>你好 {name}!</h1> <!-- 输出 <h1>你好 Astro!</h1> -->
</div>

可以在花括号中使用局部变量将属性值传递给 HTML 元素和组件:

src/components/DynamicAttributes.astro
---
const name = "Astro";
---
<h1 class={name}>支持属性表达式</h1>
<MyComponent templateLiteralNameAttribute={`MyNameIs${name}`} />

可以在类 JSX 函数中使用局部变量来产生动态生成的 HTML 元素:

src/components/DynamicHtml.astro
---
const items = ["Dog", "Cat", "Platypus"];
---
<ul>
{items.map((item) => (
<li>{item}</li>
))}
</ul>

Astro 可以使用 JSX 逻辑运算符和三元表达式有条件地显示 HTML。

src/components/ConditionalHtml.astro
---
const visible = true;
---
{visible && <p>Show me!</p>}
{visible ? <p>Show me!</p> : <p>Else show me!</p>}

你还可以将 HTML 标签赋值给变量,或重新赋值导入的组件来使用动态标签:

src/components/DynamicTags.astro
---
import MyComponent from "./MyComponent.astro";
const Element = 'div'
const Component = MyComponent;
---
<Element>Hello!</Element> <!-- 渲染成 <div>Hello!</div> -->
<Component /> <!-- 渲染成 <MyComponent /> -->

当使用动态标签时:

  • 变量名首字母必须大写。例如,使用 Element,而不是 element。否则,Astro 将尝试把变量名渲染为文本 HTML 标签。

  • 不支持 hydration 指令。当使用client:* hydration 指令时,Astro 需要知道哪些组件要捆绑到生产环境中,而动态标签模式阻止了这一点。

  • 不支持 define:vars 指令。如果你不能用额外的元素(例如 <div>)包装子元素,那么你可以手动为你的 Element 添加 style={`--myVar:${value}`}

Astro 支持使用 <Fragment> </Fragment> 或简写成 <> </> 包装多个元素。

当添加set:* 指令时,片段对于避免包装元素也很有用,如下面的示例所示:

src/components/SetHtml.astro
---
const htmlString = '<p>Raw HTML content</p>';
---
<Fragment set:html={htmlString} />

Astro 和 JSX 间的差异

段落标题 Astro 和 JSX 间的差异

Astro 组件的语法是 HTML 的超集。它的设计使得任何有 HTML 或 JSX 经验的人都感到熟悉,但 .astro 文件和 JSX 之间有几个关键的区别。

在 Astro 中,所有 HTML 属性都使用标准的 kebab-case 格式,而不是 JSX 中使用的 camelCase。这甚至适用于 class,而 React 不支持。

example.astro
<div className="box" dataValue="3" />
<div class="box" data-value="3" />

一个 Astro 组件模版可以渲染多个元素,无需像 JavaScript 或 JSX 那样将所有内容都包装在单个 <div><> 中。

src/components/RootElements.astro
---
// 包含多个元素的模板
---
<p>无需将元素包装在单个容器元素中。</p>
<p>Astro 支持模板中的多个根元素。</p>

在 Astro 中,可以使用标准的 HTML 注释或 JavaScript 风格的注释。

example.astro
---
---
<!-- HTML 注释语法在.astro 文件中是有效的 -->
{/* JS 注释语法也是有效的 */}
贡献

你有什么想法?

社区