()`)で登録され、props は構造体から型付けされます([Rust でのビルド](https://nsh.dev/translations/ja/docs/rust.md#extending-a-rust-app-with-tsx))。Rust でしか使わない UI の部品であれば、`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 では、バインディングは値を渡す場所に与えるクロージャー(またはシグナル、メモ、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 や子は小さなネイティブエフェクトとなり、その 1 つの prop を設定するか、その 1 つの子を置き換えます。Rust ではスタイルの差分が取られるため、変化したスタイルは変更されたプロパティだけを送ります。
イベントハンドラーは一度だけ設定されます。Rust ではクロージャー、TSX では関数または名前です(`onPress={() => …}`、`onPress={save}`)。TSX では、それ以外の式は追跡されます(`onPress={props.onPress}` は prop を追跡します)。
### Props
Rust のコンポーネントの props は、`#[derive(Props)]` 構造体のフィールドで、それぞれが `Prop` です。値、または親が渡したバインディングになります。バインディング(`text(props.title)`、`move || props.title.get()`)内で読み取ると追跡され、本体で `props.title.get()` を使うと一度だけ読み取られます。`#[prop(default)]` または `#[prop(default = …)]` を持つフィールドと `Option` は省略可能です。コンストラクターはすべての prop をデフォルト値から始め、親は必要なものだけセッターを呼び出します。`badge().label("New")`。
TSX では、変化する式が渡された prop はゲッターとして渡されます。`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 から何かを計算するには、クロージャーまたは [`computed`](https://nsh.dev/translations/ja/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()};
}
```
### 子要素
親がコンポーネントの中に配置したものは、そのコンポーネントの子として渡されます。Rust では `children: Prop` フィールドで、親が `.child(..)` で埋めます。TSX では `props.children` で、読み取られたときにそれらの要素を構築するゲッターです。
```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}` はその 1 つだけを更新します。兄弟要素はビューを保持し、入力欄はテキストとフォーカスを保持します。フラグメント(`<>…`)は、ビューを持たずに要素をグループ化します。
子は、コンポーネントが引数を付けて呼び出す関数、つまりレンダーコールバックでも作成できます。
```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