用 Astro 编写：语法 ✍️-js教程-PHP中文网

首页

web前端

js教程

用 Astro 编写：语法 ✍️

Dec 03, 2024 am 05:43 AM

概述

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

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

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

变量

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

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

&lt;div&gt;
  &lt;h1&gt;Hello, I'm {name}!&lt;/h1&gt;
&lt;/div&gt;

登录后复制

动态属性

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

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

&lt;HelloComponent name={name} /&gt;

登录后复制

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

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

登录后复制

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

&lt;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#"];
---
&lt;ul&gt;
  {languages.map((lang) =&gt; (
    &lt;li&gt;{lang}&lt;/li&gt;
  ))}
&lt;/ul&gt;

登录后复制

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

---
const visible = true;
---
{visible &amp;&amp; &lt;p&gt;Show me!&lt;/p&gt;}

{visible ? &lt;p&gt;Show me!&lt;/p&gt; : &lt;p&gt;Else show me!&lt;/p&gt;}

登录后复制

动态标签

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

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

const Title = 'h1'
const Component = HelloComponent;
---
&lt;Title&gt;Hello!&lt;/Title&gt;
&lt;Component /&gt;

登录后复制

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

变量名称必须大写。例如，使用标题，而不是标题：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 注释。