メインコンテンツへスキップ
バージョン: 0.21

HTML

html!マクロを使用すると、HTMLおよびSVGコードを宣言的に記述できます。これはJSX（JavaScript内でHTMLのようなコードを記述できるJavaScriptの拡張機能）に似ています。

重要な注意事項

  1. html!マクロは、1つのルートhtmlノードのみを受け入れます（フラグメントまたはイテレータを使用することで、これを回避できます）。
  2. 空のhtml! {}の呼び出しは有効であり、何もレンダリングされません
  3. リテラルは常に引用符で囲み、中括弧で囲む必要があります：html! { <p>{ "Hello, World" }</p> }
  4. html!マクロは、すべてのタグ名を小文字にします。（一部のSVG要素に必要な）大文字を使用するには、動的なタグ名を使用してください：html! { <@{"myTag"}></@> }
注意

html!マクロはコンパイラのデフォルトの再帰制限に達する可能性があります。コンパイルエラーが発生した場合は、クレートルートに#![recursion_limit="1024"]のような属性を追加して問題を解決してください。

タグ構造​

タグはHTMLタグに基づいています。コンポーネント、要素、およびリストはすべて、このタグ構文に基づいています。

タグは自己終了する必要があります<... />か、各開始タグに対応する終了タグが必要です。

use yew::prelude::*;

html! {
  <div id="my_div"></div>
};
use yew::prelude::*;

html! {
  <input id="my_input" />
};
ヒント

便宜上、通常終了タグが必要な要素は、自己終了することが許可されています。たとえば、html! { <div class="placeholder" /> }と記述することは有効です。

子要素​

複雑なネストされたHTMLおよびSVGレイアウトを簡単に作成できます

use yew::prelude::*;

html! {
    <div>
        <div data-key="abc"></div>
        <div class="parent">
            <span class="child" value="anything"></span>
            <label for="first-name">{ "First Name" }</label>
            <input type="text" id="first-name" value="placeholder" />
            <input type="checkbox" checked=true />
            <textarea value="write a story" />
            <select name="status">
                <option selected=true disabled=false value="">{ "Selected" }</option>
                <option selected=false disabled=true value="">{ "Unselected" }</option>
            </select>
        </div>
    </div>
};

リント​

Rustコンパイラのナイトリーバージョンを使用してYewをコンパイルすると、マクロは発生する可能性のある一般的な落とし穴について警告します。もちろん、リリースビルドでは安定版コンパイラを使用する必要があるかもしれませんが（たとえば、組織がそれを義務付けているポリシーを持っている場合）、安定版ツールチェーンを使用している場合でも、cargo +nightly checkを実行すると、HTMLコードを改善できるいくつかの方法を指摘する可能性があります。

現時点では、リントはほとんどがアクセシビリティ関連です。リントのアイデアがある場合は、この問題について自由に意見を述べてください。

属性とプロパティの指定​

属性は、通常のHTMLと同じ方法で要素に設定されます

use yew::prelude::*;

let value = "something";
html! { <div attribute={value} /> };

プロパティは、要素名の前に~を指定して指定します

use yew::prelude::*;

html! { <my-element ~property="abc" /> };
ヒント

値がリテラルの場合、値の周りの中括弧を省略できます。

リテラルとして分類されるもの

リテラルはすべて、Rustの有効なリテラル式です。 負の数がリテラルではないため、中括弧{-6}で囲む必要があることに注意してください

コンポーネントのプロパティ

コンポーネントのプロパティはRustオブジェクトとして渡され、ここで説明する要素属性/プロパティとは異なります。詳細については、コンポーネントプロパティを参照してください

特別なプロパティ​

DOMに直接影響を与えませんが、代わりにYewの仮想DOMへの命令として機能する特別なプロパティがあります。現在、そのような特別なプロップはrefとkeyの2つです。

refを使用すると、基になるDOMノードに直接アクセスして操作できます。詳細については、Refを参照してください。

一方、keyは、Yewが最適化に使用できる一意の識別子を要素に付与します。

情報

詳細については、リストを参照してください

条件付きレンダリング​

マークアップは、Rustの条件付き構造を使用して条件付きでレンダリングできます。 ' + '現在、ifとif letのみがサポートされています。

use yew::prelude::*;

html! {
  if true {
      <p>{ "True case" }</p>
  }
};
情報

詳細については、条件付きレンダリングを参照してください