()`), con le prop tipizzate a partire dalla struct ([Sviluppare con Rust](https://nsh.dev/translations/it/docs/rust.md#extending-a-rust-app-with-tsx)). Per un pezzo di UI usato solo da Rust basta una semplice funzione che restituisce `impl IntoElement`, con le prop come argomenti. In TSX, un componente può restituire un elemento, una stringa o un numero, un array, `null`, o una funzione che restituisce uno di questi (che il renderer segue); il tipo `Component` da `nsh` ne descrive uno:
```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}
);
```
### Cosa viene rieseguito
Un valore passato a un elemento viene impostato una sola volta; un binding segue ciò che legge. In Rust un binding è una closure (oppure un signal, un memo, una prop) passata dove va un valore. In TSX, il compilatore decide per ogni espressione nel JSX: un'espressione cambia quando **chiama una funzione o legge una proprietà** (al di fuori delle funzioni annidate), e tutto il resto viene impostato una volta sola:
```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
```
Una prop o un figlio che cambia è un piccolo effect nativo che imposta quella singola prop o sostituisce quel singolo figlio. In Rust gli stili vengono confrontati con un diff, quindi uno stile che cambia invia solo le proprietà modificate.
I gestori di eventi vengono impostati una sola volta: una closure in Rust, una funzione o un nome in TSX (`onPress={() => …}`, `onPress={save}`). In TSX, le altre espressioni vengono seguite (`onPress={props.onPress}` segue la prop).
### Props
Le props di un componente Rust sono i campi della sua struct `#[derive(Props)]`, ciascuno un `Prop`: un valore, oppure un binding passato dal genitore. Leggetene una in un binding (`text(props.title)`, `move || props.title.get()`) per seguirla; `props.title.get()` nel corpo la legge una sola volta. I campi con `#[prop(default)]` o `#[prop(default = …)]`, e gli `Option`, sono opzionali. Il costruttore parte con ogni prop al suo valore predefinito, e un genitore chiama i setter di quelle che gli servono: `badge().label("New")`.
Una prop TSX a cui viene passata un'espressione che cambia viene passata come getter: leggere `props.title` lo chiama, ed è questo che permette al JSX che la legge di seguirla. Le prop statiche sono valori semplici. In entrambi i casi, le props vengono lette dove sono usate:
```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};
}
```
Un componente TSX che scompone le sue props nel parametro, `function Title({ text }: …)`, le legge allo stesso modo una volta sola, e la build lo segnala indicando le props da leggere al suo posto:
```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)
```
Una prop che il componente vuole solo una volta, come un id con cui parte, si legge nel corpo (`props.id.get_untracked()`, `const { id } = props;`), che lo rende esplicito.
In TSX lo stesso vale per i valori predefiniti: scrivete `props.color ?? "#ddf4ff"` nel JSX invece di scomporre con un valore predefinito. Per calcolare qualcosa a partire dalle props, usate una closure o [`computed`](https://nsh.dev/translations/it/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
Ciò che un genitore inserisce in un componente arriva come i suoi children: un campo `children: Prop` in Rust, che il genitore riempie con `.child(..)`; `props.children` in TSX, un getter che costruisce quegli elementi quando viene letto:
```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}
```
In TSX, ogni lettura di `props.children` ricostruisce i children (nuove viste native): leggetelo una sola volta, nel punto in cui vanno i children. Tra più children, quello che cambia (un ``, un ``, `{cond() ? a : b}`) arriva come funzione, e `{props.children}` aggiorna solo quello: i suoi fratelli mantengono le loro viste, un input il suo testo e il focus. I fragment (`<>…`) raggruppano elementi senza una vista.
I children possono anche essere creati da una funzione che il componente chiama con degli argomenti, una 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}}
```
## Flusso di controllo
`when` e `each` in Rust, `` e `` in TSX, sono costrutti di flusso di controllo integrati. Non renderizzano alcuna vista propria.
```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