()`), avec des props typées à partir de la struct ([Développer avec Rust](https://nsh.dev/translations/fr/docs/rust.md#extending-a-rust-app-with-tsx)). Pour un morceau d'UI que seul Rust utilise, une simple fonction renvoyant `impl IntoElement` suffit, ses arguments étant les props. En TSX, un composant peut renvoyer un élément, une chaîne ou un nombre, un tableau, `null`, ou une fonction renvoyant l'un de ceux-ci (que le moteur de rendu suit) ; le type `Component` de `nsh` en décrit un :
```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}
);
```
### Ce qui s'exécute à nouveau
Une valeur donnée à un élément est définie une seule fois ; une liaison suit ce qu'elle lit. En Rust, une liaison est une closure (ou un signal, un memo, une prop) donnée là où va une valeur. En TSX, le compilateur décide pour chaque expression du JSX : une expression change quand elle **appelle une fonction ou lit une propriété** (hors fonctions imbriquées), et tout le reste est défini une seule fois :
```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
```
Une prop ou un enfant qui change est un petit effet natif qui définit cette seule prop ou remplace ce seul enfant. Les styles sont comparés (diff) en Rust, de sorte qu'un style qui change n'envoie que les propriétés modifiées.
Les gestionnaires d'événements sont définis une seule fois : une closure en Rust, une fonction ou un nom en TSX (`onPress={() => …}`, `onPress={save}`). En TSX, les autres expressions sont suivies (`onPress={props.onPress}` suit la prop).
### Props
Les props d'un composant Rust sont les champs de sa struct `#[derive(Props)]`, chacun un `Prop` : une valeur, ou une liaison transmise par le parent. Lisez-en une dans une liaison (`text(props.title)`, `move || props.title.get()`) pour la suivre ; `props.title.get()` dans le corps la lit une seule fois. Les champs avec `#[prop(default)]` ou `#[prop(default = …)]`, et les `Option`, sont optionnels. Le constructeur initialise chaque prop à sa valeur par défaut, et un parent appelle les setters de celles dont il a besoin : `badge().label("New")`.
Une prop TSX qui reçoit une expression changeante est passée sous forme de getter : lire `props.title` l'appelle, ce qui permet au JSX qui la lit de la suivre. Les props statiques sont de simples valeurs. Dans les deux cas, les props sont lues là où elles sont utilisées :
```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 composant TSX qui décompose ses props dans son paramètre, `function Title({ text }: …)`, les lit de la même façon une seule fois, et le build avertit en indiquant les props à lire à la place :
```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)
```
Une prop dont le composant n'a besoin qu'une fois, comme un id avec lequel il démarre, se lit dans le corps (`props.id.get_untracked()`, `const { id } = props;`), ce qui l'indique clairement.
En TSX, la même règle s'applique aux valeurs par défaut : écrivez `props.color ?? "#ddf4ff"` dans le JSX plutôt que de déstructurer avec une valeur par défaut. Pour calculer quelque chose à partir des props, utilisez une closure ou [`computed`](https://nsh.dev/translations/fr/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()};
}
```
### Enfants
Ce qu'un parent place dans un composant arrive comme ses enfants : un champ `children: Prop` en Rust, que le parent remplit avec `.child(..)` ; `props.children` en TSX, un getter qui construit ces éléments quand il est lu :
```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, chaque lecture de `props.children` reconstruit les enfants (de nouvelles vues natives) : lisez-le une fois, à l'endroit où vont les enfants. Parmi plusieurs enfants, celui qui change (un ``, un ``, `{cond() ? a : b}`) arrive sous forme de fonction, et `{props.children}` met à jour celui-là seul : ses frères gardent leurs vues, un champ de saisie son texte et son focus. Les fragments (`<>…`) regroupent des éléments sans vue.
Les enfants peuvent aussi être produits par une fonction que le composant appelle avec des arguments, 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}}
```
## Flux de contrôle
`when` et `each` en Rust, `` et `` en TSX, sont des structures de flux de contrôle intégrées. Elles ne rendent aucune vue propre.
```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