在 React 自定义条件渲染组件中，children 会被提前求值（即使条件为 false），导致空引用错误；根本原因是 JSX 子元素作为 prop 传入时已执行，而非惰性求值。解决方案是将 children 改为函数类型，实现按需渲染。
在 react 自定义条件渲染组件中，`children` 会被提前求值（即使条件为 false），导致空引用错误；根本原因是 jsx 子元素作为 prop 传入时已执行，而非惰性求值。解决方案是将 `children` 改为函数类型，实现按需渲染。
React 的条件渲染本质依赖 JavaScript 的短路求值机制（如 condition && <Element />），该表达式仅在 condition 为真时才执行右侧 JSX 的创建与挂载。但当我们将相同逻辑封装为自定义组件（如 <ConditionalRenderComponent condition={...}>{children}</ConditionalRenderComponent>）时，children 会在组件调用前就被 React 解析并实例化为 React 元素对象——无论其父组件内部是否真正使用它。
这意味着：即使 condition 为 false，{userData.username} 等表达式仍会在 children 构建阶段被求值，而此时 userData 可能仍为 null，从而抛出 TypeError: Cannot read properties of null (reading 'username')。
✅ 正确做法：使用函数子组件（Function as a Child）
将 children 设计为一个函数，在组件内部按需调用，确保仅当条件满足时才执行 JSX 渲染逻辑：
// ConditionalRenderComponent.jsx
import React from 'react';
function ConditionalRenderComponent({ condition, children }) {
return <div>{condition && typeof children === 'function' ? children() : null}</div>;
}
export default ConditionalRenderComponent;对应地，在使用处需将 children 改写为函数：
<ConditionalRenderComponent condition={isLoggedIn}>
{() => (
<div>
<p>Hello, {userData.username}!</p>
<p>Your email: {userData.email}</p>
</div>
)}
</ConditionalRenderComponent>? 关键点解析：{() => (...)} 是一个函数定义，不会立即执行；只有在 ConditionalRenderComponent 内部显式调用 children() 时才会触发渲染逻辑——这完全受 condition && ... 控制，实现了真正的惰性求值。
⚠️ 注意事项与最佳实践
-
类型安全增强：建议添加 PropTypes 或 TypeScript 类型约束，明确 children 应为 () => ReactNode：
interface ConditionalRenderProps { condition: boolean; children: () => React.ReactNode; } 避免意外渲染：切勿在 children 函数内执行副作用（如 fetch、setState），因其可能被多次调用（如在严格模式下）。如需数据获取，请移至父组件 useEffect 中。
性能考量：函数子组件本身无额外开销；若 children 返回复杂结构，可结合 React.memo 包裹内部组件提升局部复用性。
-
替代方案对比：
- ✅ condition && <Child />：简洁、原生、推荐用于简单场景；
- ✅ 函数子组件：适合需复用逻辑、统一包装样式/行为（如加载占位、权限兜底）的场景；
- ❌ 直接透传 children（如初始代码）：存在提前求值风险，应避免。
通过将 children 升级为函数，你不仅修复了运行时错误，更掌握了 React 渲染生命周期中“何时求值”的底层逻辑——这是构建健壮、可维护 UI 组件库的关键一课。
