用 Astro 编写：语法 ✍️

概述

大家好？
在本文中，我们将讨论 Astro 语法，以及如果您熟悉 HTML，学习它是多么容易。
让我们开始吧！ ？

---

Astro 有类似 JSX 的表达式吗？ ？

问题的答案是是。
Astro 语法是 HTML 的“超集”。该语法旨在让任何有编写 HTML 或 JSX 经验的人都感到熟悉，并添加了对包含组件和 JavaScript 表达式的支持。
如果你是一名 React 开发者，在开发项目时你会发现语法上有很多相似之处。

变量

您可以在 Astro 组件的两个代码栅栏之间的 frontmatter 组件脚本内定义本地 JavaScript 变量。然后，您可以将这些变量注入到组件的 HTML 模板中。
您以前在哪里见过这种做法？没错，JSX！ ？

---
const name = "Hugo";
---

<div>
  <h1>Hello, I'm {name}!</h1>
</div>

动态属性

可以在大括号中使用局部变量，将值传递给项目中创建和调用的组件。
我们认为上面的例子是一个以“name”作为 props 的通用组件：

---
const name = "Hugo";
---

<HelloComponent name={name} />

无法将函数和对象传递给 HTML 元素，因为 HTML 属性将转换为字符串。
例如：

---
function handleClick () {
    console.log("button clicked!");
}
---
<!-- ❌ This doesn't work! ❌ -->
<button onClick={handleClick}>Click me!</button>

如果您想使用客户端脚本添加事件处理程序，则需要使用像这样的普通 JavaScript：

<button>

<h2>
  
  
  Dynamic HTML
</h2>

<p>It is possible generate dynamic HTML with JavaScript function like JSX, in this way for example:<br>
</p>
<pre class="brush:php;toolbar:false">---
const languages = ["Python", "JavaScript", "C#"];
---
<ul>
  {languages.map((lang) => (
    <li>{lang}</li>
  ))}
</ul>

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

---
const visible = true;
---
{visible && <p>Show me!</p>}

{visible ? <p>Show me!</p> : <p>Else show me!</p>}

动态标签

这是一个很棒的功能：Astro 提供了将 HTML 标签甚至组件分配给变量的可能性：

---
import HelloComponent from "./HelloComponent.astro";

const Title = 'h1'
const Component = HelloComponent;
---
<Title>Hello!</Title>
<Component />

但是，使用动态标签时必须考虑三点：

• 变量名称必须大写。例如，使用标题，而不是标题：Astro 会尝试将您的变量名称呈现为文字 HTML 标记。

• 不支持水合指令。当使用 client:* 水合指令时，Astro 需要知道要捆绑哪些组件进行生产，而动态标签模式会阻止其工作。

• 不支持 Define:vars 指令。如果您无法用额外的元素包裹子元素，那么您可以手动添加 a 到您的元素（上例中的标题）。

碎片

Astro 支持<>类似于 JSX 语法的表示法可以将任何元素包装在其中，并且还提供内置的 。组件使用 set:* 指令来注入 HTML 字符串。

Astro 语法与 JSX

正如一开始提到的，Astro 语法是 HTML 的超集：它的设计初衷是让任何使用 HTML 或 JSX 的人都感到熟悉。
但 .astro 文件和 JSX 之间有一些关键区别。

• 属性：在 Astro 中，您对所有 HTML 属性使用标准的 kebab-case 格式，而不是 JSX 中使用的驼峰命名法，这甚至适用于 React 不支持的类。

• 多个元素：Astro 组件模板可以渲染多个元素，无需将所有内容包装在单个

  中。或。

• 注释：支持 HTML 和 JavaScript 注释。

---

结论

Astro 的语法是 HTML 的超级集，它允许各种前端开发人员像使用 HTML 或 JSX 一样工作。
太神奇了，现在...

编码愉快！✨

---

嗨??
我叫 Domenico，是一位对 Vue.js 框架充满热情的软件开发人员，我写了有关它的文章来分享我的知识和经验。
不要忘记访问我的 Linktree 来发现我的项目??

Linktree：https://linktr.ee/domenicotenace

在 dev.to 上关注我以获取其他文章??


多梅尼科·特内斯关注
对 IT 世界以及与之相关的一切充满热情 ✌？ 对 Vue 和开源充满热情？

如果您喜欢我的内容或想支持我在 GitHub 上的工作，您可以通过很小的捐款来支持我。
我将不胜感激？