()`）註冊，props 的型別來自該 struct（[以 Rust 建構](https://nsh.dev/translations/zh-TW/docs/rust.md#extending-a-rust-app-with-tsx)）。如果只是僅供 Rust 使用的一小塊 UI，回傳 `impl IntoElement` 的一般函式就已足夠，其引數即為 props。在 TSX 中，元件可以回傳元素、字串或數字、陣列、`null`，或是回傳上述任一種的函式（renderer 會追蹤它）；來自 `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}
);
```
### 重新執行的內容
提供給元素的值只會設定一次；binding 則會追蹤它所讀取的內容。在 Rust 中，binding 是放在值的位置上的 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`：可以是一個值，也可以是父元件傳入的 binding。在 binding 中讀取它（`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` 就會呼叫它，這使得讀取它的 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-TW/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` 都會重新建構子元素（產生新的原生檢視）：請只讀取一次，並且在放置子元素的位置讀取。在多個子元素中，會變更的那一個（``、``、`{cond() ? a : b}`）會以函式的形式傳入，`{props.children}` 只會更新該子元素：它的同層元素會保留各自的檢視，輸入框也會保留其文字與焦點。Fragment（`<>…`）可以將元素分組而不產生檢視。
子元素也可以由元件以引數呼叫的函式產生，也就是 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