组件工坊：Reflex 组件库 100 例
·
课程概览
布局
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
排版
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
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
rx.script官方文档
工坊订单
把访客浏览器提供的时区和语言，不经过服务器，直接显示在卡片上。
rx.script 往页面里插入 <script> 标签来执行 JavaScript。可以直接写一小段代码，也可以用 src 加载 JavaScript 文件。
它和条件渲染一起使用也很安全，所以可以由 State 决定是否插入脚本。挂载分析工具或社交组件的脚本时尤其有用。
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"),
)rx.script 没有可见的属性，所以这里不用实验台，而是用 State 来操作。rx.cond 变为真的那一刻，脚本被插入并执行，改掉下面段落的文字。
即使移除脚本，已经发生的事（改掉的文字）也不会恢复。请记住：脚本的效果会留在页面上。
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"),
)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
| 第一个子元素 | JavaScript 字符串 | 无 | 立即执行的代码。子元素和 src 必须有一个 |
src | URL | 无 | 要加载的 JavaScript 文件 |
async_ | True / False | 无 | 下载完成后单独执行 |
defer | True / False | 无 | 文档解析完成后执行 |
type | "module" 等 MIME | 无 | 脚本类型 |
char_set cross_origin integrity referrer_policy | 字符串 | 无 | 外部文件的编码、CORS、完整性校验、Referrer |
custom_attrs | dict | 无 | data-* 等其他需要的属性 |
id key class_name on_mount on_unmount | 无 | 其他可接受的属性。给其他属性会出现警告 |
避免复杂的内联脚本。超过两三行时，把它作为 .js 文件放进 assets 文件夹，再用 src 加载，更方便维护。
分析·社交脚本要求的 data-* 属性用 custom_attrs 传入。本课程不加载外部脚本，所以只以代码展示。
# 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"},
)官方文档说 rx.script 使用 Next.js 的 next/script，并写道渲染出的标签会带有 data-nscript="afterInteractive"。
Reflex 0.10 用 React Router 代替了 Next.js，rx.script 通过 react-helmet 把标签插入文档的 <head>。所以上面的代码大致会渲染成这样。
<!-- 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>如果不是常驻页面的脚本，而是“点按钮时执行一次”的代码，用 rx.call_script 事件更合适。
给出 callback，就能把 JavaScript 的结果值交回 State 的处理器。
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",
)卡片渲染时插入的内联脚本读取浏览器的 Intl 和 navigator.language，改掉标题的文字。不向服务器发送任何东西。
Your time zone
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",
)工坊笔记
rx.script("代码") 是内联，rx.script(src="/file.js") 是文件。二者必须有一个。
可以和 rx.cond 一起用，由 State 插入或移除。已经执行的效果会保留。
超过两三行就放进 assets 文件夹的 .js 文件。data-* 属性用 custom_attrs。
0.10 的 rx.script 不是 next/script，而是通过 react-helmet 插入 <head>。
点按钮时执行一次的代码，用 rx.call_script(callback=...) 更合适。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。