在 react 中，wrapper 组件的 children 会在组件调用前被 javascript 预执行，导致即使条件为 false，内部逻辑（如 console.log）仍会运行；正确做法是将 children 定义为函数，在渲染时按需调用。
在 react 中，wrapper 组件的 children 会在组件调用前被 javascript 预执行，导致即使条件为 false，内部逻辑（如 console.log）仍会运行；正确做法是将 children 定义为函数，在渲染时按需调用。
当你编写类似 <AccessControl content={false}>{console.log("Ashish")}<div>...</div></AccessControl> 的代码时，看似“条件未满足就不执行”，但实际上——JSX 子元素会在 AccessControl 组件函数体执行前就被求值。这意味着 console.log("Ashish") 总会立即触发，而 <div> 虽因 content === false 不被渲染（即不插入 DOM），但其 JSX 表达式本身已构造完成。这是 JavaScript 函数调用机制与 React 渲染流程共同决定的行为，并非 React 的 bug，而是设计使然。
要真正实现“惰性执行”（lazy evaluation）——即仅当 content 为真时才执行子内容逻辑——必须避免将 JSX 直接作为 children 传入，转而采用函数式子组件（render prop）模式：
// ✅ 正确：children 类型为函数，延迟执行
type AccessControlProps = {
content: boolean;
children: () => React.ReactNode; // 注意类型变更
};
const AccessControl = ({ content, children }: AccessControlProps) => {
return content ? children() : null;
};使用方式如下：
Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
<AccessControl content={false}>
{() => (
<>
{console.log("Ashish")} {/* 此行仅在 content 为 true 时执行 */}
<div>This is executing only when allowed</div>
</>
)}
</AccessControl>✅ 优势：
- 真正按需执行：children() 仅在 content 为 true 时被调用；
- 类型安全：TypeScript 可精准约束 children 必须是函数；
- 兼容任意逻辑：支持副作用、状态依赖、异步操作等；
- 保持 JSX 语义清晰，无需在每个使用处写三元表达式。
⚠️ 注意事项：
- 不可混用普通 JSX 与函数式 children（如 <AccessControl>{() => <div/>}<div>非法</div></AccessControl>），否则类型报错且行为不可控；
- 若需透传 props（如 userRole），可在函数中接收参数，升级为 children: (props: Context) => ReactNode；
- 对于简单静态内容（如纯文本），直接使用三元运算符 content ? <div>...</div> : null 更轻量；函数式方案适用于含副作用或复杂逻辑的场景。
总结：React Wrapper 组件无法绕过 JS 的求值顺序，但通过将 children 提升为函数，即可优雅实现条件驱动的延迟渲染——这既是解决“意外执行”的标准实践，也是构建高复用权限控制、加载态、错误边界等 Wrapper 组件的核心范式。
