ReflexKR

组件工坊：Reflex 组件库 100 例

课程概览

布局

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

排版

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

表单

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

数据展示

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

展开与切换

Tabs

Accordion

Segmented Control

浮层

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

动态渲染

Cond

Match

Foreach

Auto Scroll

媒体

Image

Audio

Video

表格与数据网格

Table

Data Table

Data Editor

图表

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

图表部件

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

其他图表库

Plotly

Pyplot

HTML 元素

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

其他工具

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

组件工坊：Reflex 组件库 100 例

其他工具

Html Embed

rx.html

官方文档

工坊订单

总部系统以 HTML 片段下发门店公告。请一字不改地原样显示，同时又要好看。

rx.html 接收一段 HTML 代码字符串并原样渲染。用于显示别处（CMS、邮件正文、Markdown 转换器）已经生成好的 HTML 片段。官方文档也建议：自己搭界面时，用 rx.el.* 元素比 rx.html 更好，因为可以绑定事件和 State。

Hello from raw HTML.

rx.html("<p>Hello from <b>raw</b> <i>HTML</i>.</p>")

试着改属性

rx.html 会生成一个 <div>，把 HTML 放进去。所以 font_size、color 这类样式会加在外层 div 上，由里面的文字继承。

试着改属性

Bold and italic

snippet

size

color

rx.html("<b>Bold</b> and <i>italic</i>", font_size="18px", color="inherit")

改改 HTML 片段和外层 div 的样式。ul 的列表符号看不见，是因为本站的 preflight。

属性	取值	默认值	用途
第一个子元素	HTML 字符串或字符串 Var	必须提供	要渲染的 HTML。只接受恰好一个
`class_name`	类名字符串	始终带有 `"rx-Html"`	外层 `div` 的类
样式属性·`style`	CSS、`"& h2"` 这类嵌套选择器	无	外层 `div` 及其内部元素的样式
`dangerouslySetInnerHTML`	`{"__html": ...}`	由子元素自动生成	内部实现，不需要自己给
通用属性	`id` `title` `role` …	无	`div` 的 HTML 属性

五个标题，一种样子

这是官方文档的示例。在本站上，五个标题看起来都一样大，因为 Radix 和 Tailwind 清掉了标题的默认样式。

Hello World

rx.vstack(
    rx.html("<h2>Hello World</h2>"),
    rx.html("<h3>Hello World</h3>"),
    rx.html("<h4>Hello World</h4>"),
    rx.html("<h5>Hello World</h5>"),
    rx.html("<h6>Hello World</h6>"),
)

样式不见了的话

官方文档推荐 class_name="prose" 搭配 Tailwind 的 @tailwindcss/typography 插件。本站没有这个插件，所以只以代码展示。

# The official docs' way: the prose class from the Tailwind typography plugin
rx.html("<h2>Hello World</h2>", class_name="prose")
# + enable the @tailwindcss/typography plugin in rxconfig.py's Tailwind settings (not on this site)

即使没有插件，在 style 里用 "& h2" 这样的嵌套选择器，也能给内部 HTML 的各个元素加样式。

Hello World

rx.html(
    "<h2>Hello World</h2><h3>Hello World</h3><h4>Hello World</h4>",
    style={
        "& h2": {"font_size": "24px", "font_weight": "bold"},
        "& h3": {"font_size": "20px", "font_weight": "bold"},
        "& h4": {"font_size": "16px", "font_weight": "600", "color": rx.color("gray", 11)},
    },
)

插入图片

<img> 标签也能原样放进去。官方文档用的是 Reflex 横幅图，本课程把外部资源统一换成了 picsum 图片。

rx.html(
    "<img src='https://picsum.photos/id/1039/400/160' alt='A waterfall' style='border-radius: 8px' />"
)

用 State 生成的 HTML 与转义

把字符串 Var 作为子元素，State 一变，HTML 也会跟着变。这时不能把用户输入的文字直接塞进去。先用 html.escape 转换 <、>，它们就会显示为文字而不是标签。确认一下：下面输入框里的  不会变成粗体，而是原样显示。 rx.html 插入的 <script> 标签即使不转义，浏览器也不会执行；但 onerror 这类属性会被执行，所以必须转义。

Welcome, Ada!

Welcome, Ada!

import html


class HtmlEmbedPreviewState(rx.State):
    name: str = "<b>Ada</b>"

    @rx.event
    def change_name(self, value: str):
        self.name = value

    @rx.var
    def card_html(self) -> str:
        safe = html.escape(self.name)
        return f"<p>Welcome, <mark>{safe}</mark>!</p>"


rx.vstack(
    rx.input(value=HtmlEmbedPreviewState.name, on_change=HtmlEmbedPreviewState.change_name, width="100%"),
    rx.html(HtmlEmbedPreviewState.card_html),
    rx.code(HtmlEmbedPreviewState.card_html, size="1"),
    width="100%",
    max_width="420px",
)

换成 rx.el 来写

如果内容可以自己搭，用 rx.el 元素做出同样的界面更好。每个元素都能绑定 on_click 和 State，转义也由 Reflex 自动处理。

Hello from raw HTML.

Hello from rx.el elements.

rx.flex(
    rx.html("<p>Hello from <b>raw</b> <i>HTML</i>.</p>"),
    rx.el.p("Hello from ", rx.el.b("rx.el"), " ", rx.el.i("elements"), "."),
    direction="column",
    spacing="2",
)

完成订单

公告 HTML 一个字都没改，只在外层用 "& h3"、"& ul"、"& a" 选择器加上了标题大小、列表符号和链接颜色。

Store hours change

From Nov 1 we open at 8 am.

Mon to Fri: 8 am - 8 pm
Sat: 9 am - 5 pm

rx.card(
    rx.html(
        "<h3>Store hours change</h3>"
        "<p>From <b>Nov 1</b> we open at <mark>8 am</mark>.</p>"
        "<ul><li>Mon to Fri: 8 am - 8 pm</li><li>Sat: 9 am - 5 pm</li></ul>"
        "<p><a href='https://reflex.dev/docs/library/other/html-embed/' target='_blank'>Read more</a></p>",
        style={
            "& h3": {"font_size": "18px", "font_weight": "bold", "margin_bottom": "6px"},
            "& ul": {"list_style_type": "disc", "padding_left": "1.4em", "margin_y": "6px"},
            "& a": {"color": rx.color("indigo", 11), "text_decoration": "underline"},
        },
    ),
    max_width="420px",
)

工坊笔记

rx.html("...") 把 HTML 字符串原样放进一个 div。子元素恰好一个。
自己搭的界面用 rx.el.* 元素更好。rx.html 用于已经是 HTML 的片段。
标题·列表的默认样式已被清除。用 prose 类或 "& h2" 这类嵌套选择器加样式。
用户输入要先用 html.escape 转义再放进去。

← 上一课

其他工具 · Clipboard

下一课 →

其他工具 · Script

订阅新课时和新课程通知

本课程新增课时或推出后续课程时，我们会发邮件通知你。

问答

关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。

ReflexKR

动手学 Python 和 Reflex。所有示例均已在 Reflex 0.10.0 上实际运行验证。

ReflexKR 免费，没有横幅广告。如果对你有帮助，欢迎请我们喝杯咖啡。 ☕ 请我们喝杯咖啡

联盟链接与赞助说明

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

Built with Reflex