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

Weitere Werkzeuge

Script

rx.script

Offizielle Doku

Werkstattauftrag

Zeig die Zeitzone und Sprache, die der Browser des Besuchers meldet, direkt auf einer Karte an, ohne Umweg über den Server.

rx.script setzt ein <script>-Tag in die Seite und führt JavaScript aus. Du schreibst kurzen Code direkt hinein oder lädst per src eine JavaScript-Datei. Es lässt sich gefahrlos mit bedingtem Rendern kombinieren, sodass der State entscheiden kann, ob das Skript eingefügt wird. Besonders nützlich ist das für Analyse-Tools oder Social-Media-Widgets.

Open the browser console (F12) to see the log.

rx.vstack(
    rx.script("console.log('inline javascript')"),
    rx.text("Open the browser console (F12) to see the log.", size="2"),
)

Skript per State ein- und ausbauen

rx.script hat keine sichtbaren Props, daher steuerst du es statt mit einem Experimentiertisch über den State. In dem Moment, in dem rx.cond wahr wird, wird das Skript eingefügt, ausgeführt und ändert den Text des Absatzes darunter. Nimmst du das Skript wieder heraus, wird bereits Geschehenes (der geänderte Text) nicht rückgängig gemacht. Merk dir: Die Wirkung eines Skripts bleibt auf der Seite.

The script has not run yet.

class ScriptToggleState(rx.State):
    enabled: bool = False

    @rx.event
    def toggle(self):
        self.enabled = not self.enabled


rx.vstack(
    rx.button(
        rx.cond(ScriptToggleState.enabled, "Remove script", "Add script"),
        on_click=ScriptToggleState.toggle,
        variant="soft",
    ),
    rx.cond(
        ScriptToggleState.enabled,
        rx.script("document.getElementById('script_toggle_out').textContent = 'Script ran at ' + new Date().toLocaleTimeString();"),
    ),
    rx.text("The script has not run yet.", id="script_toggle_out", size="2"),
)

Prop	Werte	Standard	Verwendung
Erstes Kind	JavaScript-String	keiner	Sofort auszuführender Code. Kind oder `src` muss vorhanden sein
`src`	URL	keiner	Zu ladende JavaScript-Datei
`async_`	`True` / `False`	keiner	Unabhängig ausführen, sobald heruntergeladen
`defer`	`True` / `False`	keiner	Ausführen, nachdem das Dokument fertig gelesen ist
`type`	MIME wie `"module"`	keiner	Art des Skripts
`char_set` `cross_origin` `integrity` `referrer_policy`	String	keiner	Kodierung, CORS, Integritätsprüfung und Referrer einer externen Datei
`custom_attrs`	dict	keiner	Weitere nötige Attribute wie `data-*`
`id` `key` `class_name` `on_mount` `on_unmount`		keiner	Weitere akzeptierte Props. Andere Props lösen eine Warnung aus

Kurz halten, Längeres in Dateien

Vermeide komplexe Inline-Skripte. Ab zwei, drei Zeilen legst du besser eine .js-Datei in den Ordner assets und lädst sie per src, das lässt sich leichter pflegen. data-*-Attribute, die Analyse- oder Social-Skripte verlangen, übergibst du per custom_attrs. Dieser Kurs lädt keine externen Skripte, daher steht es hier nur als Code.

# load assets/my-custom.js (files in assets/ are served under /)
rx.script(src="/my-custom.js")

# tracking/social scripts: pass the data-* attributes they need via custom_attrs
rx.script(
    src="//gc.zgo.at/count.js",
    custom_attrs={"data-goatcounter": "https://reflextoys.goatcounter.com/count"},
)

Die offizielle Doku erklärt, dass rx.script next/script von Next.js verwendet und das gerenderte Tag data-nscript="afterInteractive" bekommt. Reflex 0.10 nutzt statt Next.js aber React Router, und rx.script setzt das Tag per react-helmet in den <head> des Dokuments. Der Code oben wird deshalb etwa so gerendert.

<!-- Reflex 0.10: react-helmet puts it in the document <head> -->
<script src="//gc.zgo.at/count.js" data-goatcounter="https://reflextoys.goatcounter.com/count"></script>

Per Event ausführen: rx.call_script

Geht es nicht um ein Skript, das dauerhaft an der Seite hängt, sondern um Code, der „einmal beim Klick auf einen Button“ laufen soll, passt das Event rx.call_script besser. Mit callback bekommst du den Rückgabewert des JavaScripts in einem Handler des State zurück.

unknown

class ScriptCallState(rx.State):
    language: str = "unknown"

    @rx.event
    def receive_language(self, value: str):
        self.language = value


rx.hstack(
    rx.button(
        "Read browser language",
        on_click=rx.call_script("navigator.language", callback=ScriptCallState.receive_language),
        variant="outline",
    ),
    rx.badge(ScriptCallState.language),
    align="center",
)

Auftrag erledigt

Ein Inline-Skript, das beim Rendern der Karte eingefügt wird, liest Intl und navigator.language des Browsers aus und ändert den Text der Überschrift. An den Server wird nichts geschickt.

Your time zone

Detecting...

rx.card(
    rx.script(
        "const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;"
        " document.getElementById('script_order_tz').textContent = tz + ' · ' + navigator.language;"
    ),
    rx.text("Your time zone", size="1", color_scheme="gray"),
    # the script rewrites this text before React takes over the page,
    # so tell React the mismatch is expected
    rx.heading("Detecting...", id="script_order_tz", size="4", custom_attrs={"suppressHydrationWarning": True}),
    max_width="320px",
)

Werkstattnotizen

rx.script("code") ist inline, rx.script(src="/file.js") eine Datei. Eins von beiden ist Pflicht.
Mit rx.cond kombiniert, lässt es sich per State ein- und ausbauen. Bereits ausgeführte Wirkungen bleiben.
Ab zwei, drei Zeilen in eine .js-Datei im Ordner assets. data-*-Attribute per custom_attrs.
In 0.10 landet rx.script nicht per next/script, sondern per react-helmet im <head>.
Code, der einmal beim Klick laufen soll, passt besser zu rx.call_script(callback=...).

← Zurück

Weitere Werkzeuge · Html Embed

Weiter →

Weitere Werkzeuge · Memo

Ü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