React 自定义条件渲染组件中，children 会在组件调用时立即求值（即使条件为 false），导致空值访问错误；正确做法是将 children 改为函数类型，在条件为真时才执行，从而实现真正的惰性渲染。
react 自定义条件渲染组件中，`children` 会在组件调用时立即求值（即使条件为 false），导致空值访问错误；正确做法是将 `children` 改为函数类型，在条件为真时才执行，从而实现真正的惰性渲染。
在 React 中，条件渲染最常用的方式是 condition &&
然而，一旦将该逻辑封装进自定义组件（如 ConditionalRenderComponent），行为就会发生关键变化：
function ConditionalRenderComponent({ condition, children }) {
return <div>{condition && children}</div>;
}表面看逻辑一致，但children 是作为 prop 传入的——而 JSX 在父组件中书写时，已被 React 解析为 React Element 对象（即 React.createElement(...) 的结果）。这意味着：无论 condition 是否为 true，
Hello, {userData.username}!
这段 JSX 都会在父组件（App）渲染阶段被立即求值。此时若 userData 仍为 null，userData.username 就会触发 TypeError。这本质上是 JavaScript 函数调用时机问题，而非 React 特性缺陷：
- 普通 JSX 条件渲染 → && 是操作符，控制表达式是否参与求值；
- 自定义组件接收 children → children 是已计算完成的参数（类似函数实参），传参动作本身就会触发内部表达式执行。
✅ 正确解法：采用 Render Props 模式（函数子组件），将 children 定义为函数，延迟其执行时机：
// ✅ 修改后的 ConditionalRenderComponent
import React from 'react';
interface ConditionalRenderProps {
condition: boolean;
children: () => React.ReactNode; // ← 类型明确：children 必须是函数
}
function ConditionalRenderComponent({ condition, children }: ConditionalRenderProps) {
return <div>{condition && children()}</div>;
}
export default ConditionalRenderComponent;使用时需同步调整调用方式，将 JSX 内联结构包裹为箭头函数：
<ConditionalRenderComponent condition={isLoggedIn}>
{() => (
<div>
<p>Hello, {userData.username}!</p>
<p>Your email: {userData.email}</p>
</div>
)}
</ConditionalRenderComponent>此时，() => (...) 仅是一个函数定义，不会立即执行；只有当 ConditionalRenderComponent 内部判断 condition === true 后，才主动调用 children()，真正触发 JSX 渲染——完美复现原生 && 的惰性语义。
⚠️ 注意事项：
- 类型安全很重要：务必为 children 添加 () => React.ReactNode 类型注解，避免误传普通 JSX 导致运行时错误；
- 性能无额外开销：函数包装不产生真实 DOM 节点，也无闭包泄漏风险；
- 可扩展性强：后续还可支持 else 分支（如 children: { onTrue: ..., onFalse: ... }）或透传 condition 状态；
- 替代方案提醒：对于简单场景，推荐直接使用 condition && <...>；自定义组件更适合需要统一样式、动画、日志或组合逻辑的复杂条件渲染场景。
总结：React 中“条件渲染”的本质是控制 表达式求值时机，而非仅控制 DOM 显示。理解 children 作为 prop 的求值生命周期，是写出健壮可复用组件的关键前提。
