Reflex 条件渲染完全指南用 rx.cond 实现声明式 if/else 逻辑【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex导读本文深入讲解 Reflex 框架中用于条件渲染的核心组件rx.cond源码位于 cond.py。Reflex 是纯 Python 编写 Web 应用的框架其页面由组件树描述rx.cond让你在 Python 代码中以声明式三元表达式的方式实现根据状态动态渲染不同 UI的逻辑。读完本文你将掌握rx.cond的基本用法、可选 else 分支、逻辑运算~、、|、嵌套条件、在Var层面做条件求值如文本插值、Props 传参以及它编译成前端 JSX 的底层原理并能利用测试用例验证自己的写法。本文对应的官方文档为 docs/library/dynamic-rendering/cond.md。条件渲染是 Reflex 动态渲染体系dynamic-rendering 目录下的cond/foreach/match中最基础的一环。什么是 rx.condrx.cond是一个条件渲染组件它接收一个条件和两个组件。当条件为True时渲染第一个组件否则渲染第二个组件。这与 Python 内置的三元表达式a if cond else b在语义上完全对应只不过把值换成了UI 组件。核心实现位于Cond组件类cond.py#L27-L52其create方法cond.py#L54-L85接收三个参数参数类型说明condVar决定渲染哪个分支的条件comp1BaseComponent条件为True时渲染的组件comp2BaseComponent \| types.Unset条件为False时渲染的组件可省略从源码可以确认几个实现细节Cond组件内部用FragmentFragment包裹两个分支。分支缺失时默认补一个空的Fragment.create()这正是省略 else 就不渲染任何内容的实现基础cond.py#L50-L52。渲染时会把条件、真分支、假分支分别作为cond_state、true_value、false_value交给CondTagcond_tag.py处理cond.py#L87-L106。条件会自动调用cond_var.bool()归一化为布尔值并依赖前端状态工具函数isTrue从$/{Dirs.STATE_PATH}导入见 cond.py#L22-L24。isTrue的定义与bool()转换逻辑在 number.py#L1078-L1101。基本用法一个可切换的示例下面是最典型的场景用 State 中的一个布尔字段控制显示内容通过按钮事件切换状态。该示例直接取自官方文档cond.md#L17-L35import reflex as rx class CondState(rx.State): show: bool True rx.event def change(self): self.show not (self.show) def cond_example(): return rx.vstack( rx.button(Toggle, on_clickCondState.change), rx.cond( CondState.show, rx.text(Text 1, colorblue), rx.text(Text 2, colorred), ), )运行逻辑初始show True页面渲染蓝色 Text 1点击 Toggle 按钮触发change事件show被取反状态变化触发组件重新渲染此时条件为False改渲染红色 Text 2。这里rx.cond的条件是一个State VarCondState.show它在前端是响应式的——状态一变化分支自动切换无需手动操作 DOM。省略 else 分支rx.cond的第二个组件else 分支是可选的。省略时如果条件为False则什么都不渲染。下面的示例来自文档cond.md#L40-L58class CondOptionalState(rx.State): show_optional: bool True rx.event def toggle_optional(self): self.show_optional not (self.show_optional) def cond_optional_example(): return rx.vstack( rx.button(Toggle, on_clickCondOptionalState.toggle_optional), rx.cond( CondOptionalState.show_optional, rx.text(This text appears when condition is True, colorgreen), ), rx.text(This text is always visible, colorgray), )注意最后一行的灰色文本放在rx.vstack里、rx.cond之外所以它始终可见——这提醒我们rx.cond只控制它自己包裹的子树不会被条件波及。这一行为同样有单元测试佐证test_cond_no_else和test_cond_render_missing_false_child_defaults_to_fragment验证了省略 else 时Cond的false_value会默认渲染为空Fragmenttest_cond.py#L110-L136。条件取反使用逻辑运算符 ~~是 Reflex Var 上的逻辑非运算符可以对条件取反。文档示例cond.md#L64-L78rx.vstack( rx.button(Toggle, on_clickCondState.change), rx.cond( CondState.show, rx.text(Text 1, colorblue), rx.text(Text 2, colorred) ), rx.cond( ~CondState.show, rx.text(Text 1, colorblue), rx.text(Text 2, colorred) ), )两个rx.cond的条件互为相反数因此它们的显示状态永远互补当show为True时第一个渲染蓝色文本、第二个渲染红色文本show为False时刚好对调。这常用于同时展示当前状态与反向状态的对称 UI。关于运算符的支持细节Reflex 为 Var 重载了 Python 运算符包括~not、and、|or、、等它们都会编译为对应的 JS 表达式。相关实现见 number.py 中的布尔运算部分。多条件组合使用 和 |除了取反还可以用逻辑与和逻辑或|组合出复杂条件。文档给出的示例是根据年龄判断能否工作cond.md#L80-L110import random class CondComplexState(rx.State): age: int 19 rx.event def change(self): self.age random.randint(0, 100) def cond_complex_example(): return rx.vstack( rx.button(Toggle, on_clickCondComplexState.change), rx.text(fAge: {CondComplexState.age}), rx.cond( (CondComplexState.age 18) (CondComplexState.age 65), rx.text(You can work!, colorgreen), rx.text(You cannot work!, colorred), ), )要点、、是 Var 的重载运算符整个条件(CondComplexState.age 18) (CondComplexState.age 65)会被编译为一个 JS 布尔表达式边界值 18 和 65 是包含的使用/而非/年龄恰好为 18 或 65 时仍显示 You can work!同理|表示逻辑或例如(age 18) | (age 65)即可表达未成年或已退休。点击按钮后change事件会把age随机重置为 0~100 之间的整数页面上的年龄文本和判断结果会同步更新是验证多条件组合的直观演示。嵌套条件用 rx.cond 表达 if / elif / elserx.cond的分支本身也可以是rx.cond从而表达 Python 中的if ... elif ... else逻辑链。判断正负零文档用判断一个数是正数、零还是负数展示了嵌套写法cond.md#L112-L156。先看等价的纯 Python 逻辑number 0 if number 0: print(Positive number) elif number 0: print(Zero) else: print(Negative number)逻辑上完全等价的 Reflex 代码import random class NestedState(rx.State): num: int 0 def change(self): self.num random.randint(-10, 10) def cond_nested_example(): return rx.vstack( rx.button(Toggle, on_clickNestedState.change), rx.cond( NestedState.num 0, rx.text(f{NestedState.num} is Positive!, colororange), rx.cond( NestedState.num 0, rx.text(f{NestedState.num} is Zero!, colorblue), rx.text(f{NestedState.num} is Negative!, colorred), ), ), )映射关系一目了然PythonReflexif number 0:外层rx.cond(NestedState.num 0, ...)elif number 0:内层rx.cond(NestedState.num 0, ...)作为外层 else 分支else:最内层rx.text(...)作为内层 else 分支f{NestedState.num} is Positive!这类 f-string 插值在 Reflex 中同样支持 Var 内插可参考 test_f_string_cond_interpolation 对插值转义行为的验证。三数比较更复杂的嵌套实战文档还给出了一个更进阶的例子判断三个数中哪个最大cond.md#L158-L175。等价的 Python 逻辑a 8 b 10 c 2 if (a b and a c) and (a ! b and a ! c): print(a, is the largest!) elif (b a and b c) and (b ! a and b ! c): print(b, is the largest!) elif (c a and c b) and (c ! a and c ! b): print(c, is the largest!) else: print(Some of the numbers are equal!)将其逐层翻译为嵌套rx.cond时只需记住三条规则最外层rx.cond的第一个参数对应第一个if条件第一个组件对应其分支内容每个elif用内层rx.cond挂在上一层的 else 位置内层第一个参数就是该elif的条件最终的else分支是最内层rx.cond的第二个组件。嵌套虽然直观但层数增多后可读性会下降。如果你的条件本质是多分支匹配Reflex 还提供了更结构化的rx.match参见 match.md它更接近 Python 的match语句适合处理 3 个以上互斥分支的场景。进阶rx.cond 不只是组件还是条件 Var从 cond.py#L172-L218 的实现可以看出cond函数会根据参数类型自动分派当第一个参数是组件BaseComponent时创建Cond组件用于渲染分支 UI当参数不是组件、而是普通值或 Var 时cond返回一个条件 Var——即编译成 JS 三元表达式condition ? c1 : c2的 Var可用于文本插值、Props 传参等需要值而非组件的场合。例如在文本中做条件插值rx.text(f状态{rx.cond(show, 开, 关)})单元测试test_prop_cond验证了这一行为test_cond.py#L74-L102对True、32、hello、2.3等任意类型的真假值cond都返回形如(true ? hello : )的 Var。test_cond_computed_var还验证了条件 Var 可与计算属性computed var混用test_cond.py#L139-L162。类型系统与重载cond定义了大量overload重载cond.py#L121-L170让类型检查器pyright/mypy能根据实参类型推断返回类型组件 组件 →Component字符串字面量 字符串字面量 →Var[Literal[...]]字面量类型收窄不同类型 →Var[T | U]联合类型。test_cond_assert_types用assert_type逐条验证了这些推断规则test_cond.py#L165-L213。混用限制组件分支可以省略 else但条件 Var 必须提供两个参数否则抛出ValueError见 cond.py#L202-L204测试test_cond_no_else验证了该行为组件与值可以混用cond(cond, text_component, fallback)或cond(cond, hello, text_component)都是合法的最终仍会构造Cond组件并把值包进Fragmentcond.py#L192-L201。彩蛋color_mode_cond 与响应式条件渲染同一个文件中还提供了color_mode_cond(light, dark)便捷函数cond.py#L221-L243它等价于cond(resolved_color_mode light, light, dark)可以根据当前亮色/暗色主题返回不同的组件或值是rx.cond在主题场景下的典型应用。另外Reflex 编译器对Cond与Match有专门处理在 memoize.py 中可以看到Cond和Match被归类为条件分支组件没有tag渲染时从自己的 props 生成分支 JSX在自动记忆化auto-memo优化中会走专门的逻辑避免不必要的重渲染。这说明条件组件在前端性能优化管线中也有一席之地。从源码到前端rx.cond 是怎么工作的把上述内容串起来rx.cond的完整数据流如下定义阶段cond(条件, c1, c2)被调用条件经LiteralVar.create转成 Var 并调用.bool()归一化cond.py#L187-L196组件阶段若分支是组件构造Cond组件两个分支分别用Fragment包裹cond.py#L71-L85渲染阶段Cond.render()把cond_state/true_value/false_value交给CondTag生成模板数据cond.py#L95-L106导入阶段add_imports自动合并条件 Var 的依赖导入并引入前端的isTrue工具函数cond.py#L108-L118前端阶段编译产物中条件被编译为 JS 布尔表达式两个分支成为 JSX最终表现为三元表达式/条件渲染——这正是test_validate_cond所断言的渲染结果结构test_cond.py#L40-L71。集成层面tests/integration/tests_playwright/test_cond_match.pytest_cond_match.py用真实浏览器端到端验证了cond与match的运行时行为可作为完整运行验证的参考。最佳实践小结优先用 State Var 作为条件保证 UI 随状态自动更新能用/|/~组合条件就别层层嵌套逻辑更清晰分支超过 3 个时考虑rx.match比深嵌套的cond可读性更好给 UI 赋值、做文本插值时用条件 Varcond返回 Var 的形态给渲染分支用组件形态别忘 else 分支是可选的只需有则显示、无则隐藏时只传一个组件即可。掌握了rx.cond你就掌握了 Reflex 动态渲染的第一块基石——配合 foreach.md列表渲染与 match.md多分支匹配即可构建完整的响应式页面逻辑。【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
