Astro语法简介：像写HTML和JSX一样简单又强大-原创手记-慕课网

概览

大家好 👋
在这篇文章中，我们将聊聊 Astro 语法，你会发现如果你已经熟悉 HTML，它其实超级好学。
那咱们开始吧 🤙

此处省略了

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

答案是是的。
Astro 的语法是一个 "超集"，包含了 HTML。该语法设计得让任何有写过 HTML 或 JSX 经验的人都感到熟悉，并增加了对组件和 JavaScript 表达式的支持。
如果你是一名 React 开发者，你会发现项目中语法有很多相似之处。

变量：一些可以改变的值

你可以在 Astro 组件的 frontmatter 部分的脚本中，在两个代码块之间定义本地的 JavaScript 变量。然后你可以在组件的 HTML 模板中使用这些变量。
你以前在哪见过这种做法？没错，JSX！🤩

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

    <div>
      <h1>嘿，我是{name}！</h1>
    </div>

全屏退出全屏

动态特性

可以在大括号中使用局部变量将值传递给项目中创建和调用的组件。
我们认为上述示例是一个通用组件，它接受“名称”作为属性。

    ---
    const 姓名 = "Hugo";
    // 这里定义了一个名为 "Hugo" 的常量
    ---

    <HelloComponent name={姓名} />
    // 这里调用了一个名为 HelloComponent 的组件，并传递了一个名为 "姓名" 的属性

全屏切换，可以进入或退出全屏

无法将函数和对象传递给HTML元素作为属性，因为HTML属性只能接受字符串类型的值。
举个例子:

---
const handleClick = () => {
    console.log("按钮被点击了！");
}
---
<!-- ❌ 这不起作用！❌ -->
<button onClick={handleClick}>点击我！</button>

进入全屏模式，退出全屏模式

如果你想通过客户端脚本添加事件处理程序，你需要这样用纯JavaScript

    <button id="button">点我</button>
    <script>
      function handleClick () {
        console.log("按钮被点了！");
      }
      document.getElementById("button").addEventListener("click", handleClick);
    </script>

进入全屏退出全屏

DHTML 或动态网页技术

可以使用像 JSX 這樣的 JavaScript 函數來生成動態的 HTML，例如下：

---
// 变量languages包含以下编程语言: "Python", "JavaScript", "C#";
---
<ul>
  {languages.map((lang) => (
    <li>{lang}</li>
  ))}
</ul>

进入全屏模式。退出全屏模式。

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

---
    const visible = true;
    ---
    {visible && <p>显示我！</p>}

    {visible ? <p>显示我！</p> : <p>不然显示我！</p>}

进入全屏，退出全屏

动态标签（或简称动态标签）

这个功能真的很棒：Astro 允许你将 HTML 标签甚至组件赋值给变量。

---
从 './HelloComponent.astro' 导入 HelloComponent;

const Title = 'h1'
const Component = HelloComponent;
---

<${Title}>你好!</${Title}>
<Component />

全屏，退出全屏

不过，在使用动态标签时必须注意三点：

变量名必须全部大写。例如，使用 Title 而非 Title，以强调大写的规则：Astro 会尝试将您的变量名当作实际的 HTML 标签来渲染。
不支持hydration指令. 当使用 client:* hydration directives 时，Astro 需要知道哪些组件需要被打包到生产环境中，这使得动态标签模式无法正常工作。
define:vars 指令不被支持。如果你无法用一个额外的元素包裹子元素的话，那么你可以手动在你的元素上添加一个 to，比如上面例子中的 Title。

片段:

Astro 支持 JSX 风格的 <></> 语法来包裹任何组件，并且还提供了一个内置的 <Fragment /> 组件来使用 set:* 指令 来插入 HTML 字符串。

Astro 语法 VS JSX，哪个更好用？

正如之前所说，Astro 语法是 HTML 的超集：它被设计成让熟悉 HTML 或 JSX 的人感到熟悉。
但是，.astro 文件与 JSX 之间有几个关键的不同之处。

属性：在 Astro 中，你使用标准的 kebab-case 格式来使用所有 HTML 属性，而不是在 JSX 中通常使用的 camelCase。这甚至适用于类名（class），在 Astro 中使用 kebab-case 格式是被支持的。
多个独立元素：Astro 组件模板可以渲染多个元素，而无需用单一的 <div> 或 <div> 包裹所有内容。
注释：支持 HTML 和 JavaScript 注释。

……

最后

Astro 的语法是 HTML 的超集，这让各种前端开发者可以像在使用 HTML 或 JSX 一样工作。
这真是太棒了，接下来...

编程愉快！加油！

嗨👋🏻
我是多梅尼科，是一名热爱 Vue.js 框架的软件开发者，我写文章分享我在这方面的知识和经验。
别忘了访问我的 Linktree 查看我的项目 🫰🏻

链接树: https://linktr.ee/domenicotenace （一个用于更有序地分享链接的平台）

在我的 dev.to 上关注我，可以读到更多我写的文章 👇🏻

dvalin99 图片，点击这里查看

Domenico Tenace 关注一下

https://dev.to/dvalin99

热爱IT世界和所有相关事物 ✌🏻 热爱Vue和开源 🦠 了解更多详情请访问 https://dev.to/dvalin99

如果你喜欢我的内容或想要支持我在 GitHub 上的工作，你可以小额打赏我。我将不胜感激 😊

买我一杯咖啡 ](https://www.buymeacoffee.com/domenicotenace)