()`）註冊，props 的型別來自 struct（[以 Rust 建構](https://nsh.dev/translations/zh-HK/docs/rust.md#extending-a-rust-app-with-tsx)）。若某段 UI 只供 Rust 使用，回傳 `impl IntoElement` 的普通函數已經足夠，其參數就是 props。在 TSX 中，元件可以回傳元素、字串或數字、陣列、`null`，或是回傳上述任何一種的函數（渲染器會追蹤它）；來自 `nsh` 的 `Component` 型別可用來描述這些回傳值：
```rust
fn row(title: impl Into, content: impl IntoElement) -> impl IntoElement {
view()
.flex_row()
.gap_2()
.child(text(title.into()))
.child(content)
}
```
```tsx
import type { Component, JSX } from "nsh";
import { Text, View } from "nsh";
const Row: Component<{ title: string; children?: JSX.Element }> = (props) => (
{props.title}
{props.children}
);
```
### 重新執行的內容
給予元素的值只會設定一次；綁定則會追蹤它所讀取的內容。在 Rust 中，綁定就是放在值的位置上的 closure（或 signal、memo、prop）。在 TSX 中，由編譯器判斷 JSX 內的每個表達式：當表達式**呼叫函數或讀取屬性**（巢狀函數之外）時，它就會變動，其餘一律只設定一次：
```rust
text(move || format!("{}", count.get())) // follows count
text(props.title) // follows the prop
text(label.clone()) // a plain value: set once
view().opacity(move || if busy.get() { 0.5_f32 } else { 1.0 }) // follows busy
```
```tsx
{count()} // follows count
{props.title} // follows the prop
{user.name} // re-read when something it depends on changes
{label} // a plain variable: set once
// the style object is rebuilt when busy changes
```
會變動的 prop 或子元素是一個小型原生 effect，只會設定那一個 prop 或取代那一個子元素。Rust 中的樣式會做差異比對，因此改變了的樣式只會送出有變動的屬性。
事件處理器只會設定一次：Rust 中是 closure，TSX 中是函數或名稱（`onPress={() => …}`、`onPress={save}`）。在 TSX 中，其他表達式則會被追蹤（`onPress={props.onPress}` 會追蹤該 prop）。
### Props
Rust 元件的 props 是其 `#[derive(Props)]` struct 的欄位，每個都是 `Prop`：一個值，或是父元件傳入的綁定。在綁定中讀取它（`text(props.title)`、`move || props.title.get()`）即可追蹤它；在主體中使用 `props.title.get()` 則只讀取一次。帶有 `#[prop(default)]` 或 `#[prop(default = …)]` 的欄位，以及 `Option` 欄位，皆為可選。建構函數會讓每個 prop 從預設值開始，父元件只呼叫它所需要的那些 setter：`badge().label("New")`。
若 TSX 的 prop 被賦予會變動的表達式，它會以 getter 形式傳入：讀取 `props.title` 即呼叫該 getter，讓讀取它的 JSX 得以追蹤它。靜態 props 則是普通的值。無論哪種情況，props 都在使用之處讀取：
```rust
// Wrong: reads the prop once, when the component runs.
#[component]
fn Title(props: TitleProps) -> impl IntoElement {
let content = props.text.get();
text(content)
}
// Right: binds the text to the prop.
#[component]
fn Title(props: TitleProps) -> impl IntoElement {
text(props.text)
}
```
```tsx
// Wrong: reads the prop once, when the component runs.
function Title(props: { text: string }) {
const { text } = props;
return {text};
}
// Right: reads it in JSX, which follows it.
function Title(props: { text: string }) {
return {props.text};
}
```
若 TSX 元件在參數中解構其 props（`function Title({ text }: …)`），同樣只會讀取一次，建置時會發出警告，並指出應改為讀取哪些 props：
```text
warn App.tsx:3:16: Title takes its props apart (`{ text }`): each is read once, when Title runs, and does not follow changes; take `props` and read `props.text` where it is used (`split(props, [...])` to pass the rest on)
```
若元件只需要某個 prop 一次，例如作為起始值的 id，則在主體中讀取它（`props.id.get_untracked()`、`const { id } = props;`），這樣寫明確表達了意圖。
在 TSX 中，預設值也是同樣道理：請在 JSX 中寫 `props.color ?? "#ddf4ff"`，而不是在解構時使用預設值。若要由 props 計算出某些內容，請使用 closure 或 [`computed`](https://nsh.dev/translations/zh-HK/docs/reactivity.md#computed)：
```rust
#[component]
fn Price(props: PriceProps) -> impl IntoElement {
let formatted = move || format!("${:.2}", props.cents.get() as f64 / 100.0);
text(formatted)
}
```
```tsx
function Price(props: { cents: number }) {
const formatted = () => `$${(props.cents / 100).toFixed(2)}`;
return {formatted()};
}
```
### Children
父元件放進元件內的內容會作為其 children 傳入：Rust 中是 `children: Prop` 欄位，由父元件以 `.child(..)` 填入；TSX 中是 `props.children`，它是一個 getter，讀取時才建立那些元素：
```rust
#[derive(Debug, Clone, PartialEq, Props)]
pub struct CardProps {
/// The title.
pub title: Prop,
/// The content.
pub children: Prop,
}
#[component]
pub fn Card(props: CardProps) -> impl IntoElement {
view()
.p(px(14.0))
.rounded(px(12.0))
.bg(move || theme().background)
.gap_2()
.child(text(props.title).font_weight(FontWeight::SEMIBOLD))
.child(props.children)
}
card()
.title("Account")
.child(text(move || format!("Signed in as {}", user.get().name)))
```
```tsx
function Card(props: { title: string; children?: JSX.Element }) {
return (
{props.title}
{props.children}
);
}
Signed in as {user().name}
```
在 TSX 中，每次讀取 `props.children` 都會再次建立 children（新的原生視圖）：請只讀取一次，並在 children 應該出現的位置讀取。在多個 children 之中，會變動的那一個（``、``、`{cond() ? a : b}`）會以函數形式傳入，而 `{props.children}` 只更新那一個：其同層元素保留各自的視圖，輸入框則保留其文字和焦點。Fragment（`<>…`）可在沒有視圖的情況下為元素分組。
Children 也可以由元件以參數呼叫的函數建立，即 render callback：
```rust
fn repeat(times: usize, row: impl Fn(usize) -> E) -> impl IntoElement {
view().child((0..times).map(row))
}
repeat(3, |i| text(format!("Row {i}")))
```
```tsx
function Repeat(props: { times: number; children: (i: number) => JSX.Element }) {
return {Array.from({ length: props.times }, (_, i) => props.children(i))};
}
{(i) => Row {i}}
```
## 控制流程
Rust 中的 `when` 和 `each`，以及 TSX 中的 `` 和 ``，都是內建的控制流程。它們本身不渲染任何視圖。
```rust
when(move || user.get().is_some(), move || {
text(move || format!("Hello, {}", user.get().map(|u| u.name).unwrap_or_default()))
})
.otherwise(|| text("Signed out"))
each(todos, |todo| todo.id, |todo, index| {
text(move || format!("{}. {}", index.get() + 1, todo.get().title))
})
```
```tsx
Signed out