|
這一章我們講解一下 RSX! 的基本使用方法。 我們先準備一個略微復(fù)雜的 HTML 結(jié)構(gòu)，然后嘗試用 RSX 表達它： <div style="text-align:center;">
<h1>Hello Dioxus</h1>
<a href="https://www.">Dioxus 中文網(wǎng)</a>
<p class="content">幫助您快速構(gòu)建可靠的用戶界面程序。</p>
</div>
這段 HTML 看起來還算復(fù)雜吧，那我們嘗試轉(zhuǎn)換一下它： rsx! {
div {
style: "text-align:center;",
h1 { "Hello Dioxus" }
a {
href: "https://www./",
"Dioxus 中文網(wǎng)"
}
p {
class: "content",
"幫助您快速構(gòu)建可靠的用戶界面程序。"
}
}
}
細品一下吧，你大概已經(jīng)明白 RSX 怎么編寫了吧！是不是看起來比 HTML 舒服多了。 info 先聲明元素各類屬性（如 style id class href）等，再聲明子元素。
可以使用 []、()、{} 中的任意一種調(diào)用rsx!宏。
參數(shù)后需要帶逗號，而子元素則無所謂。 自定義屬性?在上面的例子中，我們使用到了 style class href 等常用屬性，它們都被 Dioxus 定義在了內(nèi)部。
但是如果我們需要用的某個屬性并不是 HTML 規(guī)則中存在的，而是自定義的，如： <div dioxus-data="10">Hello World</div>
那我們在編寫時則需要為它打上雙引號： rsx! {
div {
"dioxus-data": "10",
"Hello World"
}
}
其實所有屬性都可以被雙引號包裹，但是為了代碼提示工具能檢查出異常，常用的可屬性也可不加。
|
