用 Astro 寫：語法 ✍️-js教程-PHP中文網

用 Astro 寫：語法 ✍️

DDD

發布： 2024-12-03 05:43:13

原創

881 人瀏覽過

概述

大家好？
在本文中，我們將討論 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 />

登入後複製

但是，使用動態標籤時必須考慮三點：