ReflexKR

El taller de componentes: los 100 componentes de Reflex

Resumen del curso

Diseño

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Tipografía

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formularios

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Visualización de datos

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Mostrar y ocultar

Tabs

Accordion

Segmented Control

Superposiciones

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Renderizado dinámico

Cond

Match

Foreach

Auto Scroll

Multimedia

Image

Audio

Video

Tablas y cuadrículas de datos

Table

Data Table

Data Editor

Gráficos

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Piezas de gráficos

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Otras bibliotecas de gráficos

Plotly

Pyplot

Elementos HTML

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Otras herramientas

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

El taller de componentes: los 100 componentes de Reflex

Otras herramientas

Script

rx.script

Documentación oficial

Pedido del taller

Muestra directamente en una tarjeta la zona horaria y el idioma que indica el navegador del visitante, sin pasar por el servidor.

rx.script mete una etiqueta <script> en la página para ejecutar JavaScript. Puedes escribir directamente código corto o cargar un archivo JavaScript con src. Es seguro usarlo junto con el renderizado condicional, así que el State puede decidir si se incluye o no el script. Resulta especialmente útil para añadir scripts de analítica o widgets sociales.

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"),
)

Añadir y quitar scripts con el State

rx.script no tiene propiedades visibles, así que en lugar de un banco de pruebas lo manejamos con el State. En el momento en que rx.cond pasa a verdadero, el script entra, se ejecuta y cambia el texto del párrafo de abajo. Aunque quites el script, lo que ya ha ocurrido (el texto cambiado) no se deshace. Recuerda que los efectos de un script se quedan en la página.

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"),
)

Propiedad	Valores	Por defecto	Uso
Primer hijo	Cadena de JavaScript	Ninguno	Código que se ejecuta directamente. Hace falta el hijo o `src`
`src`	URL	Ninguno	Archivo JavaScript que se carga
`async_`	`True` / `False`	Ninguno	Se ejecuta por separado en cuanto se descarga
`defer`	`True` / `False`	Ninguno	Se ejecuta tras leer todo el documento
`type`	MIME como `"module"`	Ninguno	Tipo de script
`char_set` `cross_origin` `integrity` `referrer_policy`	Cadena	Ninguno	Codificación, CORS, comprobación de integridad y referrer del archivo externo
`custom_attrs`	dict	Ninguno	Otros atributos necesarios, como `data-*`
`id` `key` `class_name` `on_mount` `on_unmount`		Ninguno	Otros atributos que acepta. Cualquier otro da un aviso

Corto; si es largo, en un archivo

Evita los scripts en línea complejos. Si pasan de dos o tres líneas, es más fácil de mantener ponerlos en un archivo .js de la carpeta assets y cargarlos con src. Los atributos data-* que piden los scripts de analítica o redes sociales se dan con custom_attrs. Este curso no carga scripts externos, así que se muestra solo como código.

# 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"},
)

La documentación oficial explica que rx.script usa next/script de Next.js y que la etiqueta generada lleva data-nscript="afterInteractive". Reflex 0.10 usa React Router en lugar de Next.js, y rx.script mete la etiqueta en el <head> del documento con react-helmet. Por eso el código de arriba se renderiza más o menos así:

<!-- 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>

Ejecutar desde un evento: rx.call_script

Si no es un script que deba estar siempre en la página, sino código que se ejecuta "una vez al pulsar un botón", lo adecuado es el evento rx.call_script. Si das callback, el valor resultante del JavaScript vuelve a un handler del State.

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",
)

Completar el pedido

El script en línea que entra al dibujarse la tarjeta lee Intl y navigator.language del navegador y cambia el texto del título. No se envía nada al servidor.

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",
)

Notas del taller

rx.script("código") es en línea; rx.script(src="/file.js"), un archivo. Uno de los dos, obligatorio.
Junto con rx.cond, el State puede añadirlo y quitarlo. Los efectos ya ejecutados se quedan.
Si pasa de dos o tres líneas, a un archivo .js de la carpeta assets. Los atributos data-*, con custom_attrs.
En 0.10, rx.script no usa next/script: entra en el <head> mediante react-helmet.
Para código que se ejecuta una vez al pulsar un botón, lo adecuado es rx.call_script(callback=...).

← Anterior

Otras herramientas · Html Embed

Otras herramientas · Memo

Recibe avisos de nuevas lecciones

Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.

Preguntas y respuestas

Pregunta lo que quieras sobre esta lección. Aquí se reúnen las preguntas de todas las versiones de idioma de esta página.

ReflexKR

Aprende Python y Reflex haciendo. Todos los ejemplos se ejecutaron y verificaron en Reflex 0.10.0.

ReflexKR es gratis y sin banners publicitarios. Si te ayudó, puedes apoyarlo con un café. ☕ Invítanos un café

Aviso de afiliados

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

Built with Reflex