|
這一章我們講解一下 RSX! 的基本使用方法。 我們先準備一個略微復雜的 HTML 結構,，然后嘗試用 RSX 表達它： <div style="text-align:center;">
<h1>Hello Dioxus</h1>
<a href="https://www.">Dioxus 中文網(wǎng)</a>
<p class="content">幫助您快速構建可靠的用戶界面程序。</p>
</div>
這段 HTML 看起來還算復雜吧，那我們嘗試轉換一下它： rsx! {
div {
style: "text-align:center;",
h1 { "Hello Dioxus" }
a {
href: "https://www./",
"Dioxus 中文網(wǎng)"
}
p {
class: "content",
"幫助您快速構建可靠的用戶界面程序,。"
}
}
}
細品一下吧，你大概已經(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"
}
}
其實所有屬性都可以被雙引號包裹,，但是為了代碼提示工具能檢查出異常，常用的可屬性也可不加,。
|
