用 Astro 寫：語法 ✍️

概述

大家好？
在本文中，我們將討論 Astro 語法，以及如果您熟悉 HTML，學習它是多麼容易。
讓我們開始吧！ ？

---

Astro 有類似 JSX 的表達式嗎？ ？

問題的答案是是。
Astro 語法是 HTML 的「超集」。該語法旨在讓任何有編寫 HTML 或 JSX 經驗的人都感到熟悉，並添加了對包含組件和 JavaScript 表達式的支援。
如果你是 React 開發者，在開發專案時你會發現語法上有很多相似之處。

變數

您可以在 Astro 元件的兩個程式碼柵欄之間的 frontmatter 元件腳本內定義本機 JavaScript 變數。然後，您可以將這些變數注入到元件的 HTML 模板中。
您以前在哪裡看過這種做法？沒錯，JSX！ ？

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

<div>
  <h1 id="Hello-I-m-name">Hello, I'm {name}!</h1>
</div>

動態屬性

可以在大括號中使用局部變量，將值傳遞給專案中建立和呼叫的元件。
我們認為上面的範例是一個以「name」作為 props 的通用元件：

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

<hellocomponent name="{name}"></hellocomponent>

無法將函數和物件傳遞給 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#"];
---

{languages.map((lang) => (
• {lang}
))}

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></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 上的工作，您可以透過很小的捐款來支持我。
我將不勝感激？