()`), com props tipadas a partir da struct ([Construindo com Rust](https://nsh.dev/translations/pt-BR/docs/rust.md#extending-a-rust-app-with-tsx)). Para um trecho de UI usado apenas por Rust, basta uma função simples que retorne `impl IntoElement`, com os argumentos sendo as props. Em TSX, um componente pode retornar um elemento, uma string ou número, um array, `null`, ou uma função que retorne qualquer um destes (que o renderizador acompanha); o tipo `Component` de `nsh` descreve um deles:
```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}
);
```
### O que executa novamente
Um valor passado a um elemento é definido uma vez; um binding acompanha o que lê. Em Rust, um binding é uma closure (ou um signal, um memo, uma prop) passada onde um valor vai. Em TSX, o compilador decide para cada expressão no JSX: uma expressão muda quando **chama uma função ou lê uma propriedade** (fora de funções aninhadas), e todo o resto é definido uma 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
```
Uma prop ou filho que muda é um pequeno effect nativo que define aquela prop ou substitui aquele filho. Em Rust, os estilos passam por diff, de modo que um estilo que muda envia apenas as propriedades que mudaram.
Handlers de eventos são definidos uma vez: uma closure em Rust, uma função ou um nome em TSX (`onPress={() => …}`, `onPress={save}`). Em TSX, as demais expressões são acompanhadas (`onPress={props.onPress}` acompanha a prop).
### Props
As props de um componente Rust são os campos de sua struct `#[derive(Props)]`, cada um um `Prop`: um valor, ou um binding que o pai passou. Leia um deles em um binding (`text(props.title)`, `move || props.title.get()`) para acompanhá-lo; `props.title.get()` no corpo o lê uma vez. Campos com `#[prop(default)]` ou `#[prop(default = …)]`, e `Option`s, são opcionais. O construtor inicia cada prop com seu valor padrão, e o pai chama os setters das que precisa: `badge().label("New")`.
Uma prop TSX que recebe uma expressão que muda é passada como um getter: ler `props.title` o chama, o que permite que o JSX que a lê a acompanhe. Props estáticas são valores simples. Em ambos os casos, as props são lidas onde são usadas:
```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};
}
```
Um componente TSX que desestrutura suas props no parâmetro, `function Title({ text }: …)`, as lê da mesma forma, uma única vez, e o build avisa disso indicando as props a ler no 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)
```
Uma prop que o componente quer apenas uma vez, como um id com o qual ele começa, é lida no corpo (`props.id.get_untracked()`, `const { id } = props;`), o que deixa isso explícito.
Em TSX, o mesmo vale para valores padrão: escreva `props.color ?? "#ddf4ff"` no JSX em vez de desestruturar com um valor padrão. Para calcular algo a partir de props, use uma closure ou [`computed`](https://nsh.dev/translations/pt-BR/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()};
}
```
### Filhos
O que um pai coloca em um componente chega como seus filhos: um campo `children: Prop` em Rust, que o pai preenche com `.child(..)`; `props.children` em TSX, um getter que constrói esses elementos quando lido:
```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}
```
Em TSX, cada leitura de `props.children` constrói os filhos novamente (novas views nativas): leia-o uma vez, no lugar onde os filhos devem ficar. Entre vários filhos, aquele que muda (um ``, um ``, `{cond() ? a : b}`) chega como uma função, e `{props.children}` atualiza somente esse: seus irmãos mantêm suas views, e um input mantém seu texto e foco. Fragments (`<>…`) agrupam elementos sem uma view.
Filhos também podem ser criados por uma função que o componente chama com argumentos, um 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}}
```
## Controle de fluxo
`when` e `each` em Rust, `` e `` em TSX, são controles de fluxo embutidos. Eles não renderizam nenhuma view própria.
```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