()`), con props tipadas a partir del struct ([Building with Rust](https://nsh.dev/translations/es/docs/rust.md#extending-a-rust-app-with-tsx)). Para una pieza de UI que solo usa Rust, basta una función simple que devuelva `impl IntoElement`, con sus argumentos como props. En TSX, un componente puede devolver un elemento, una cadena o un número, un array, `null`, o una función que devuelva cualquiera de estos (que el renderizador sigue); el tipo `Component` de `nsh` describe 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}
);
```
### Qué se ejecuta de nuevo
Un valor dado a un elemento se establece una vez; un binding sigue lo que lee. En Rust, un binding es un closure (o un signal, un memo, una prop) dado donde va un valor. En TSX, el compilador decide para cada expresión del JSX: una expresión cambia cuando **llama a una función o lee una propiedad** (fuera de funciones anidadas), y todo lo demás se establece una vez:
```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 hijo cambiante es un pequeño effect nativo que establece esa única prop o reemplaza ese único hijo. En Rust los estilos se comparan por diferencias, de modo que un estilo que cambia solo envía las propiedades que cambiaron.
Los manejadores de eventos se establecen una vez: un closure en Rust, una función o un nombre en TSX (`onPress={() => …}`, `onPress={save}`). En TSX, las demás expresiones se siguen (`onPress={props.onPress}` sigue la prop).
### Props
Las props de un componente de Rust son los campos de su struct `#[derive(Props)]`, cada uno un `Prop`: un valor, o un binding que pasó el padre. Léelo dentro de un binding (`text(props.title)`, `move || props.title.get()`) para seguirlo; `props.title.get()` en el cuerpo lo lee una sola vez. Los campos con `#[prop(default)]` o `#[prop(default = …)]`, y los `Option`, son opcionales. El constructor inicia cada prop con su valor por defecto, y un padre llama a los setters de las que necesita: `badge().label("New")`.
Una prop de TSX a la que se le da una expresión cambiante se pasa como getter: al leer `props.title` se la invoca, y eso es lo que permite que el JSX que la lee la siga. Las props estáticas son valores simples. En ambos casos, las props se leen donde se usan:
```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 de TSX que desestructura sus props en el parámetro, `function Title({ text }: …)`, las lee igualmente una sola vez, y la compilación lo advierte indicando las props que se deben leer en su lugar:
```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 que el componente quiere solo una vez, como un id con el que empieza, se lee en el cuerpo (`props.id.get_untracked()`, `const { id } = props;`), lo que deja claro su intención.
En TSX lo mismo se aplica a los valores por defecto: escribe `props.color ?? "#ddf4ff"` en el JSX en lugar de desestructurar con un valor por defecto. Para calcular algo a partir de las props, usa un closure o [`computed`](https://nsh.dev/translations/es/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()};
}
```
### Hijos
Lo que un padre coloca dentro de un componente llega como sus hijos: un campo `children: Prop` en Rust, que el padre rellena con `.child(..)`; `props.children` en TSX, un getter que construye esos elementos al leerse:
```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}
```
En TSX, cada lectura de `props.children` vuelve a construir los hijos (nuevas vistas nativas): léelo una sola vez, en el lugar donde van los hijos. Entre varios hijos, uno que cambia (un ``, un ``, `{cond() ? a : b}`) llega como una función, y `{props.children}` actualiza solo ese: sus hermanos conservan sus vistas, y un input conserva su texto y su foco. Los fragmentos (`<>…`) agrupan elementos sin vista.
Los hijos también pueden crearse mediante una función que el componente llama con argumentos, un 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}}
```
## Control de flujo
`when` y `each` en Rust, `` y `` en TSX, son estructuras de control de flujo integradas. No renderizan ninguna vista propia.
```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