首頁 > web前端 > js教程 > 用 Astro 寫:語法 ✍️

用 Astro 寫:語法 ✍️

DDD
發布: 2024-12-03 05:43:13
原創
925 人瀏覽過

概述

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


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

問題的答案是
Astro 語法是 HTML 的「超集」。該語法旨在讓任何有編寫 HTMLJSX 經驗的人都感到熟悉,並添加了對包含組件和 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 上關注我以獲取其他文章??

    Write in Astro: the syntax ✍️

    多梅尼科·特內斯

    對 IT 世界以及與之相關的一切充滿熱情 ✌? 對 Vue 和開源充滿熱情?

    如果您喜歡我的內容或想支持我在 GitHub 上的工作,您可以透過很小的捐款來支持我。
    我將不勝感激?

    Write in Astro: the syntax ✍️

以上是用 Astro 寫:語法 ✍️的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板