mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
90b4e55ebc
* change suffixes from md to mdx fix broken links for English locale tree shake and update docusaurus add docusaurus ideal image plugin use svg and themed image delete unused static asset * move localized landing page * change GitLocalize project page * nit pick * remove ignore to have the block checked
60 lines
1.2 KiB
Plaintext
60 lines
1.2 KiB
Plaintext
---
|
|
title: Literals and Expressions
|
|
---
|
|
## リテラル
|
|
|
|
式が`Display`を実装した型を解決する場合、文字列に変換されてDOMに[Text](https://developer.mozilla.org/en-US/docs/Web/API/Text)ノードとして挿入されます。
|
|
|
|
テキストは式として処理されるため、全ての表示される内容は`{}`ブロックによって囲まれる必要があります。
|
|
これはYewのアプリと通常のHTMLの構文で最も異なる点です。
|
|
|
|
```rust
|
|
let text = "lorem ipsum";
|
|
html!{
|
|
<>
|
|
<div>{text}</div>
|
|
<div>{"dolor sit"}</div>
|
|
<span>{42}</span>
|
|
</>
|
|
}
|
|
```
|
|
|
|
## 式
|
|
|
|
HTMLに`{}`ブロックを使って式を挿入することができます。
|
|
|
|
```rust
|
|
html! {
|
|
<div>
|
|
{
|
|
if show_link {
|
|
html! {
|
|
<a href="https://example.com">{"Link"}</a>
|
|
}
|
|
} else {
|
|
html! {}
|
|
}
|
|
}
|
|
</div>
|
|
}
|
|
```
|
|
|
|
式を関数やクロージャに分離するのはコードの可読性の観点から有効なことがあります。
|
|
|
|
```rust
|
|
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>
|
|
}
|
|
```
|