条件渲染 ConditionalRender

用于根据条件动态渲染某段 JSX，提供简洁的写法与封装。支持显式 Show 包裹形式，便于控制样式隐藏而不销毁组件。

最常用的组件之一。

📦 引入方式

import { ConditionalRender } from '@itera-web/react-ui-core';

---

🧩 使用示例

📚 函数形式渲染

conditional 为 true 时渲染 children 返回值，否则渲染 noMatch 返回值。

示例

未登录

源码

<ConditionalRender conditional={false} noMatch={() => <div>未登录</div>}>
  {() => <div>已登录</div>}
</ConditionalRender>

📚Visible 形式（样式隐藏）

conditional 为 false 时会通过 CSS 类 .ConditionalRenderHidden 隐藏元素，但不销毁它。

示例

我是可见的

源码

<ConditionalRender.Show conditional={true}>
  {() => <div className="text-primary">我是可见的</div>}
</ConditionalRender.Show>

📚Display 形式（样式隐藏不会留白）

conditional 为 false 时会通过 CSS 类 .ConditionalRenderHidden 隐藏元素，但不销毁它。

示例

我是可见的

源码

<ConditionalRender.Display conditional={true}>
  {() => <div className="text-primary">我是可见的</div>}
</ConditionalRender.Display>

---

🧩 Props

组件名	属性	类型	默认值	说明
ConditionalRender	conditional	boolean	false	是否满足渲染条件
	children	() => React.ReactNode	() => null	条件为真时返回的内容
	noMatch	() => React.ReactNode	() => null	条件为假时返回的内容
ConditionalRender.Show	conditional	boolean	true	是否显示内容（为假时隐藏）
	children	() => React.ReactNode	() => null	包裹的显示内容
	className	string	''	可选类名（支持额外样式）
ConditionalRender.Display	conditional	boolean	true	是否显示内容（为假时隐藏）
	children	() => React.ReactNode	() => null	包裹的显示内容
	className	string	''	可选类名（支持额外样式）

---

📌 注意事项

• children 和 noMatch 都是函数形式，这是为了延迟执行渲染逻辑，避免无效计算。
• Show 组件不会销毁组件，只是样式隐藏，适用于保留 DOM 状态的场景（例如表单、动画、懒加载等）。
• 若使用时出现 TypeScript 报错，请确保你的 IConditionalRenderProps 和 IConditionalRenderShowProps 类型定义正确。