ReflexKR

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Kursüberblick

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typografie

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formulare

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Datenanzeige

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Auf- und Zuklappen

Tabs

Accordion

Segmented Control

Overlays

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamisches Rendern

Cond

Match

Foreach

Auto Scroll

Medien

Image

Audio

Video

Tabellen und Datengrids

Table

Data Table

Data Editor

Diagramme

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Diagrammbausteine

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Andere Diagrammbibliotheken

Plotly

Pyplot

HTML-Elemente

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Weitere Werkzeuge

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Dynamisches Rendern

Foreach

rx.foreach

Offizielle Doku

Werkstattauftrag

Bitte baue eine To-do-Liste. Man soll neue Aufgaben hinzufügen und erledigte per Klick auf „Done“ aus der Liste entfernen können.

rx.foreach(Liste, Funktion) durchläuft eine Liste, ein Tupel oder ein dict aus dem State und reiht für jeden Eintrag die Komponente auf, die die Funktion erzeugt. Ändert sich die Liste, wird die Anzeige sofort neu gezeichnet. Pythons for läuft nur einmal beim Erzeugen der Seite und funktioniert deshalb nicht mit State-Listen.

Für State-Variablen nimmst du rx.foreach, für unveränderliche Konstanten Python-List- und Dict-Comprehensions.

#E5484D

#12A594

#3E63DD

#AD5700

#F76B15

#8E4EC6

class ForeachColorState(rx.State):
    colors: list[str] = ["#E5484D", "#12A594", "#3E63DD", "#AD5700", "#F76B15", "#8E4EC6"]


def foreach_color_swatch(label: rx.Var[str | int], color: rx.Var[str]):
    return rx.box(
        rx.text(label, color="white", weight="medium"),
        bg=color,
        padding_y="0.5em",
        padding_x="0.75em",
        min_width="5.5em",
        text_align="center",
        border_radius="0.375rem",
    )


def foreach_colored_box(color: rx.Var[str]):
    return foreach_color_swatch(color, color)


rx.grid(
    rx.foreach(ForeachColorState.colors, foreach_colored_box),
    columns="2",
    spacing="2",
)

Das color, das die Funktion bekommt, ist kein Python-String, sondern ein rx.Var[str]. Du kannst es also direkt als Kind oder Prop-Wert (bg=color) einsetzen, aber weder Pythons if noch String-Methoden darauf anwenden (für Bedingungen gibt es rx.cond).

Selbst ausprobieren

rx.foreach hat keine Props fürs Aussehen. Ändere stattdessen die Liste. Ein Klick auf ein Badge entfernt den Eintrag, Add fügt einen neuen hinzu. Um einem Event den Wert des Eintrags mitzugeben, schreibst du etwa on_click=State.remove(f).

applebanana

2 items

FOREACH_FRUIT_POOL = ["apple", "banana", "cherry", "grape", "kiwi", "mango", "pear", "plum"]


class ForeachLiveState(rx.State):
    fruits: list[str] = ["apple", "banana"]

    @rx.event
    def add(self):
        for f in FOREACH_FRUIT_POOL:
            if f not in self.fruits:
                self.fruits.append(f)
                return

    @rx.event
    def remove(self, fruit: str):
        if fruit in self.fruits:
            self.fruits.remove(fruit)

    @rx.event
    def reset_fruits(self):
        self.fruits = ["apple", "banana"]


rx.vstack(
    rx.hstack(
        rx.foreach(
            ForeachLiveState.fruits,
            lambda f: rx.badge(f, rx.icon("x", size=12), on_click=ForeachLiveState.remove(f), cursor="pointer", size="2"),
        ),
        wrap="wrap",
    ),
    rx.hstack(
        rx.button("Add", on_click=ForeachLiveState.add, size="1"),
        rx.button("Reset", on_click=ForeachLiveState.reset_fruits, size="1", variant="soft", color_scheme="gray"),
        rx.text(ForeachLiveState.fruits.length(), " items", size="1", color_scheme="gray"),
        align="center",
    ),
)

Argument	Werte	Verwendung
Erstes (`iterable`)	Listen-, Tupel- oder dict-Var	Die zu durchlaufende Liste. Meist eine State- oder berechnete Variable
Zweites (`render_fn`)	Funktion `(item)` oder `(item, index)`	Baut aus einem Eintrag eine Komponente. Das zweite Argument ist eine bei 0 beginnende Nummer

Mit Index

Nimmt die Funktion zwei Argumente, kommt als zweites der Index (rx.Var[int], ab 0). Die Farbkästchen nutzen unverändert foreach_color_swatch aus dem ersten Beispiel (wie auch das dict-Beispiel unten).

class ForeachIndexState(rx.State):
    colors: list[str] = ["#E5484D", "#12A594", "#3E63DD", "#AD5700"]


def foreach_colored_box_index(color: rx.Var[str], index: rx.Var[int]):
    return foreach_color_swatch(index, color)


rx.grid(
    rx.foreach(ForeachIndexState.colors, lambda color, index: foreach_colored_box_index(color, index)),
    columns="2",
    spacing="2",
)

Verschachtelte Listen

Ein rx.foreach innerhalb eines rx.foreach zeichnet eine zweidimensionale Liste. Dabei musst du den Typ der State-Variable vollständig angeben, etwa list[list[str]]. Reflex muss den Typ der inneren Einträge kennen, um die Unterlisten zu durchlaufen, und fängt so fehlerhaften Code ab, bevor ein Fehler im Browser auftritt.

class ForeachNestedState(rx.State):
    numbers: list[list[str]] = [["1", "2", "3"], ["4", "5", "6"], ["7", "8", "9"]]


def foreach_display_row(row: rx.Var[list[str]]):
    return rx.hstack(
        rx.foreach(
            row,
            lambda item: rx.box(item, border=f"1px solid {rx.color('gray', 8)}", padding="0.5em", min_width="2.2em", text_align="center"),
        ),
    )


rx.vstack(rx.foreach(ForeachNestedState.numbers, foreach_display_row))

Über ein dict

Übergibst du ein dict, bekommt die Funktion jeweils ein Paar (Schlüssel, Wert). color[0] ist der Schlüssel, color[1] der Wert. Der Schlüssel kommt in der Funktion immer als String an, egal welchen Typ er ursprünglich hatte (hier int).

class ForeachSimpleDictState(rx.State):
    color_chart: dict[int, str] = {1: "#3E63DD", 2: "#E5484D", 3: "#12A594"}


def foreach_display_color(color: rx.Var[tuple[str, str]]):
    # color is a key-value pair such as ("1", "#3E63DD").
    return foreach_color_swatch(color[0], color[1])


rx.grid(
    rx.foreach(ForeachSimpleDictState.color_chart, foreach_display_color),
    columns="3",
    spacing="2",
)

Sind die Werte des dict Listen, durchläufst du den Wert wieder mit rx.foreach. Unten stehen unter jeder Schlüsselfarbe die dazu passenden Farben.

#8E4EC6

#E5484D

#3E63DD

#F76B15

#AD5700

#E5484D

#12A594

#3E63DD

#AD5700

class ForeachComplexDictState(rx.State):
    color_chart: dict[str, list[str]] = {
        "#8E4EC6": ["#E5484D", "#3E63DD"],
        "#F76B15": ["#AD5700", "#E5484D"],
        "#12A594": ["#3E63DD", "#AD5700"],
    }


def foreach_display_colors(color: rx.Var[tuple[str, list[str]]]):
    return rx.vstack(
        foreach_color_swatch(color[0], color[0]),
        rx.hstack(rx.foreach(color[1], lambda x: foreach_color_swatch(x, x))),
        align="center",
        spacing="2",
    )


rx.grid(
    rx.foreach(ForeachComplexDictState.color_chart, foreach_display_colors),
    columns="3",
    spacing="4",
)

Konstanten per Python-Comprehension

Ist die Liste eine unveränderliche Konstante, brauchst du kein rx.foreach. Python läuft beim Erzeugen der Seite einmal durch und breitet die Komponenten aus, und die Einträge sind echte Python-Werte, auf die du String-Methoden oder if anwenden kannst.

SMLXL

rx.hstack(
    *[rx.badge(size, variant="soft") for size in ["S", "M", "L", "XL"]],
)

Auftrag erledigt

Die Aufgaben sind eine Liste von dicts {"id", "text"} (eine Liste von dataclasses wie in der offiziellen Doku geht auch). Gibst du jedem Eintrag key=item["id"], bleiben die übrigen Zeilen erhalten, wenn einer entfernt wird. Done übergibt dem Handler die id des Eintrags, und der Handler baut eine neue Liste ohne diese id. Die Eingabe läuft über ein Formular, sodass auch Enter hinzufügt.

Todos

Write Code
Sleep
Have Fun

class ForeachTodoState(rx.State):
    items: list[dict[str, str]] = [
        {"id": "1", "text": "Write Code"},
        {"id": "2", "text": "Sleep"},
        {"id": "3", "text": "Have Fun"},
    ]
    next_id: int = 4

    @rx.event
    def add_item(self, form_data: dict):
        text = form_data.get("new_item", "").strip()[:40]
        if text and len(self.items) < 8:
            self.items = self.items + [{"id": str(self.next_id), "text": text}]
            self.next_id += 1

    @rx.event
    def finish_item(self, item_id: str):
        self.items = [item for item in self.items if item["id"] != item_id]


rx.vstack(
    rx.heading("Todos", size="4"),
    rx.form(
        rx.hstack(
            rx.input(name="new_item", placeholder="Add a todo...", flex="1"),
            rx.button("Add", type="submit"),
            width="100%",
        ),
        on_submit=ForeachTodoState.add_item,
        reset_on_submit=True,
        width="100%",
    ),
    rx.divider(),
    rx.list.ordered(
        rx.foreach(
            ForeachTodoState.items,
            lambda item: rx.list.item(
                rx.hstack(
                    rx.button("Done", on_click=ForeachTodoState.finish_item(item["id"]), size="1", variant="soft"),
                    rx.text(item["text"]),
                    align="center",
                ),
                key=item["id"],
            ),
        ),
    ),
    width="100%",
    max_width="360px",
    padding="1em",
    border_radius="0.5em",
    background=rx.color("gray", 3),
)

Werkstattnotizen

rx.foreach(State.liste, funktion). Für konstante Listen Python-Comprehensions.
Der Eintrag in der Funktion ist eine Var. Statt Pythons if rx.cond, Werte per item["key"].
Mit (item, index) gibt es auch den Index. Ein dict liefert Paare (Schlüssel, Wert), der Schlüssel wird zum String.
Bei verschachtelten Listen den Typ vollständig angeben, etwa list[list[str]].
Listen, in denen entfernt und hinzugefügt wird, bekommen key=eindeutiger Wert.

← Zurück

Dynamisches Rendern · Match

Weiter →

Dynamisches Rendern · Auto Scroll

Über neue Lektionen informiert werden

Wir schicken dir eine E-Mail, wenn dieser Kurs neue Lektionen bekommt oder ein Folgekurs erscheint.

Fragen & Antworten

Frag alles zu dieser Lektion. Fragen aus allen Sprachversionen dieser Seite erscheinen hier gemeinsam.

ReflexKR

Python und Reflex zum Anfassen. Alle Beispiele wurden mit Reflex 0.10.0 ausgeführt und geprüft.

ReflexKR ist kostenlos und ohne Werbebanner. Wenn es dir geholfen hat, kannst du es mit einem Kaffee unterstützen. ☕ Spendier uns einen Kaffee

Hinweis zu Affiliate-Links

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex