リテラルと式

リテラル

式が`Display`を実装する型に解決される場合、それらは文字列に変換され、テキストノードとしてDOMに挿入されます。

注記

文字列リテラルは、ブラウザによって文字列として扱われる`Text`ノードを作成します。そのため、式に`<script>`タグが含まれていても、XSSなどのセキュリティ問題に陥ることはありません。もちろん、式を`<script>`ブロックで囲まない限りはです。

すべての表示テキストは、式として扱われるため、`{}`ブロックで囲む必要があります。これは、Yewが行う通常のHTML構文からの最大の逸脱です。

use yew::prelude::*;

let text = "lorem ipsum";
html!{
    <>
        <div>{text}</div>
        <div>{"dolor sit"}</div>
        <span>{42}</span>
    </>
};

式

`Html`に解決される限り、`{}`ブロックを使用してHTMLに式を挿入できます。

use yew::prelude::*;

let show_link = true;

html! {
  <div>
    {
      if show_link {
        html! {
          <a href="https://example.com">{"Link"}</a>
        }
      } else {
        html! {}
      }
    }
  </div>
};

可読性のためにこれらの式を関数またはクロージャに抽出することが理にかなっていることがよくあります。

use yew::prelude::*;

let show_link = true;
let maybe_display_link = move || -> Html {
  if show_link {
    html! {
      <a href="https://example.com">{"Link"}</a>
    }
  } else {
    html! {}
  }
};

html! {
     <div>{maybe_display_link()}</div>
};