()`), mit Props, die aus der Struct typisiert werden ([Building with Rust](https://nsh.dev/translations/de/docs/rust.md#extending-a-rust-app-with-tsx)). Für ein Stück UI, das nur Rust verwendet, genügt eine einfache Funktion, die `impl IntoElement` zurückgibt, wobei ihre Argumente die Props sind. In TSX darf eine Komponente ein Element, einen String oder eine Zahl, ein Array, `null` oder eine Funktion zurückgeben, die eines davon zurückgibt (der der Renderer folgt). Der Typ `Component` aus `nsh` beschreibt so einen Wert:
```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}
);
```
### Was erneut ausgeführt wird
Ein Wert, den man einem Element gibt, wird einmal gesetzt, ein Binding hingegen folgt dem, was es liest. In Rust ist ein Binding ein Closure (oder ein Signal, ein Memo, ein Prop), das dort übergeben wird, wo ein Wert hingehört. In TSX entscheidet der Compiler für jeden Ausdruck im JSX: Ein Ausdruck ändert sich, wenn er **eine Funktion aufruft oder eine Property liest** (außerhalb verschachtelter Funktionen), und alles andere wird einmal gesetzt:
```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
```
Ein sich ändernder Prop oder ein sich änderndes Child ist ein kleiner nativer Effect, der genau diesen einen Prop setzt oder genau dieses eine Child ersetzt. Styles werden in Rust per Diff verglichen, sodass ein Style, der sich ändert, nur die geänderten Properties sendet.
Event-Handler werden einmal gesetzt: ein Closure in Rust, eine Funktion oder ein Name in TSX (`onPress={() => …}`, `onPress={save}`). In TSX werden andere Ausdrücke verfolgt (`onPress={props.onPress}` folgt dem Prop).
### Props
Die Props einer Rust-Komponente sind die Felder ihrer `#[derive(Props)]`-Struct, jedes ein `Prop`: ein Wert oder ein Binding, das der Parent übergeben hat. Wer einen Prop in einem Binding liest (`text(props.title)`, `move || props.title.get()`), folgt ihm; `props.title.get()` im Body liest ihn einmal. Felder mit `#[prop(default)]` oder `#[prop(default = …)]` sowie `Option`s sind optional. Der Konstruktor setzt jeden Prop auf seinen Default, und ein Parent ruft die Setter der Props auf, die er braucht: `badge().label("New")`.
Ein TSX-Prop, dem ein sich ändernder Ausdruck übergeben wird, wird als Getter weitergereicht: Das Lesen von `props.title` ruft ihn auf, und genau dadurch kann das JSX, das ihn liest, ihm folgen. Statische Props sind einfache Werte. In beiden Fällen werden Props dort gelesen, wo sie verwendet werden:
```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};
}
```
Eine TSX-Komponente, die ihre Props bereits im Parameter zerlegt, `function Title({ text }: …)`, liest sie ebenso einmalig, und der Build warnt davor und nennt die Props, die stattdessen zu lesen sind:
```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)
```
Ein Prop, den die Komponente nur einmal braucht, etwa eine ID, mit der sie startet, wird im Body gelesen (`props.id.get_untracked()`, `const { id } = props;`), was das ausdrücklich zeigt.
In TSX gilt dasselbe für Default-Werte: Schreiben Sie `props.color ?? "#ddf4ff"` im JSX, anstatt mit einem Default zu destrukturieren. Um etwas aus Props zu berechnen, verwenden Sie ein Closure oder [`computed`](https://nsh.dev/translations/de/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
Was ein Parent in eine Komponente setzt, kommt als deren Children an: in Rust als `children: Prop`-Feld, das der Parent mit `.child(..)` füllt; in TSX als `props.children`, ein Getter, der diese Elemente beim Lesen aufbaut:
```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 baut jedes Lesen von `props.children` die Children erneut auf (neue native Views): Lesen Sie es einmal, an der Stelle, an der die Children hingehören. Unter mehreren Children kommt eines, das sich ändert (ein ``, ein ``, `{cond() ? a : b}`), als Funktion an, und `{props.children}` aktualisiert nur dieses eine: Seine Geschwister behalten ihre Views, ein Input behält seinen Text und seinen Fokus. Fragmente (`<>…`) gruppieren Elemente ohne eine View.
Children können auch von einer Funktion erzeugt werden, die die Komponente mit Argumenten aufruft, einem 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}}
```
## Kontrollfluss
`when` und `each` in Rust, `` und `` in TSX, sind eingebauter Kontrollfluss. Sie rendern keine eigene View.
```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