()`), а типы props берутся из структуры ([Building with Rust](https://nsh.dev/translations/ru/docs/rust.md#extending-a-rust-app-with-tsx)). Для фрагмента UI, который использует только Rust, достаточно обычной функции, возвращающей `impl IntoElement`, а её аргументы и есть props. В TSX компонент может вернуть элемент, строку или число, массив, `null` или функцию, возвращающую любое из этого (которую отслеживает рендерер); тип `Component` из `nsh` описывает такое значение:
```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}
);
```
### Что выполняется повторно
Значение, переданное элементу, задаётся один раз; привязка следует за тем, что читает. В Rust привязка — это замыкание (или сигнал, memo, prop), переданное туда, где ожидается значение. В TSX компилятор решает это для каждого выражения в JSX: выражение изменяется, если оно **вызывает функцию или читает свойство** (вне вложенных функций), а всё остальное задаётся один раз:
```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
```
Изменяющийся prop или дочерний элемент — это небольшой нативный эффект, который задаёт именно этот prop или заменяет именно этот дочерний элемент. Стили в Rust сравниваются построчно, поэтому изменившийся стиль отправляет только изменённые свойства.
Обработчики событий задаются один раз: замыкание в Rust, функция или имя в TSX (`onPress={() => …}`, `onPress={save}`). В TSX остальные выражения отслеживаются (`onPress={props.onPress}` следит за prop).
### Свойства (props)
Props компонента на Rust — это поля его структуры `#[derive(Props)]`, каждое из которых имеет тип `Prop`: значение либо привязка, переданная родителем. Прочитайте prop в привязке (`text(props.title)`, `move || props.title.get()`), чтобы следовать за ним; `props.title.get()` в теле читает его один раз. Поля с `#[prop(default)]` или `#[prop(default = …)]`, а также `Option`, необязательны. Конструктор начинает каждый prop со значения по умолчанию, а родитель вызывает сеттеры только тех, которые ему нужны: `badge().label("New")`.
Prop в TSX, которому передано изменяющееся выражение, передаётся как геттер: чтение `props.title` вызывает его, благодаря чему JSX, который его читает, следует за ним. Статические props — это обычные значения. В обоих случаях props читаются там, где используются:
```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};
}
```
Компонент на TSX, который разбирает props прямо в параметре, `function Title({ text }: …)`, читает их так же один раз, и сборка предупреждает об этом, указывая, какие props читать вместо них:
```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)
```
Prop, который компоненту нужен лишь один раз, например начальный id, читается в теле (`props.id.get_untracked()`, `const { id } = props;`), что явно об этом говорит.
В TSX то же относится к значениям по умолчанию: пишите `props.color ?? "#ddf4ff"` в JSX, а не деструктурируйте со значением по умолчанию. Чтобы вычислить что-то из props, используйте замыкание или [`computed`](https://nsh.dev/translations/ru/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)
То, что родитель помещает в компонент, приходит как его children: поле `children: Prop` в Rust, которое родитель заполняет с помощью `.child(..)`; `props.children` в TSX — геттер, который при чтении строит эти элементы:
```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}
```
В TSX каждое чтение `props.children` заново строит дочерние элементы (новые нативные представления): читайте его один раз, в том месте, куда children попадают. Среди нескольких дочерних элементов тот, который изменяется (``, ``, `{cond() ? a : b}`), приходит как функция, и `{props.children}` обновляет только его: соседние элементы сохраняют свои представления, а поле ввода — свой текст и фокус. Фрагменты (`<>…`) группируют элементы без представления.
Дочерние элементы также можно создавать функцией, которую компонент вызывает с аргументами, — 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}}
```
## Управление потоком
`when` и `each` в Rust, `` и `` в TSX — встроенные конструкции управления потоком. Они не создают собственного представления.
```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