文字和表達式

文字

如果表達式解析為實作 Display 的類型，它們將會轉換為字串，並作為 Text 節點插入到 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>
};