Astro で書く: 構文 ✍️-jsチュートリアル-php.cn

Astro で書く: 構文 ✍️

DDD

リリース： 2024-12-03 05:43:13

オリジナル

876 人が閲覧しました

概要

皆さん、こんにちは?
この記事では、Astro 構文について、また HTML に慣れていれば驚くほど簡単に学習できることについて説明します。
始めましょう！ ?

Astro には JSX 風の表現がありますか? ?

質問に対する答えははいです。
Astro 構文は HTML の「スーパーセット」です。この構文は、HTML または JSX の作成経験がある人なら誰でも親しみやすいように設計されており、コンポーネントと JavaScript 式を含めるサポートが追加されています。
あなたが React 開発者であれば、プロジェクトを開発するときに構文に多くの類似点があることに気づくでしょう。

変数

Astro コンポーネントの 2 つのコードフェンスの間の、frontmatter コンポーネントスクリプト内でローカル JavaScript 変数を定義できます。その後、これらの変数をコンポーネントの HTML テンプレートに挿入できます。
この実践を以前にどこで見たことがありますか?そうです、JSX! ?

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

<div>
  <h1>Hello, I'm {name}!</h1>
</div>

ログイン後にコピー

動的属性

ローカル変数を中括弧内で使用して、プロジェクトで作成および呼び出されるコンポーネントに値を渡すことができます。
上記の例は、小道具として「name」を取る汎用コンポーネントであると考えられます:

---
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 />

ログイン後にコピー

ただし、動的タグを使用する場合は、次の 3 つの点を考慮する必要があります。

変数名は大文字にする必要があります。たとえば、タイトルではなくタイトルを使用します。Astro は変数名をリテラル HTML タグとしてレンダリングしようとします。
ハイドレーションディレクティブはサポートされていません。 client:* ハイドレーションディレクティブを使用する場合、Astro は実稼働用にどのコンポーネントをバンドルするかを知る必要がありますが、動的タグパターンによりこれが機能しません。
define:vars ディレクティブはサポートされていません。子を追加の要素でラップできない場合は、要素 (上記の例ではタイトル) に手動でを追加できます。

断片

Astro は <> をサポートしています。 JSX の構文のような表記法を使用して任意の要素をラップし、組み込みのも提供します。 set:* ディレクティブを使用して HTML 文字列を挿入するコンポーネント。

Astro 構文と JSX

冒頭で述べたように、Astro 構文は HTML のスーパーセットであり、HTML や JSX を使用する人にとって親しみやすいように設計されています。
ただし、.astro ファイルと JSX の間にはいくつかの重要な違いがあります。

属性: Astro では、JSX で使用されるキャメルケースの代わりに、すべての HTML 属性に標準のケバブケース形式を使用します。これは、React でサポートされていないクラスでも機能します。
複数の要素: Astro コンポーネントテンプレートは、すべてを単一の
でラップする必要がなく、複数の要素をレンダリングできます。または <>
コメント: HTML コメントと JavaScript コメントの両方がサポートされています。