Wrapper组件条件为false仍执行内部代码，如何用包装组件替代三元运算符？

你遇到的核心问题是：React在传递子元素时，会提前执行所有子元素中的代码，不管组件内部的条件判断。所以即使content为false，console.log("Ashish")这类代码在组件接收children之前就已经运行了。

要避免这种情况，同时不用三元运算符，你可以把children设计成一个函数，让子元素的执行逻辑延迟到组件内部条件满足时才触发：

1. 调整组件类型与实现 #

type acProps = {
  content: boolean;
  // 把children定义为返回React节点的函数
  children: () => React.ReactNode;
};

const AccessControl = ({ content, children }: acProps) => {
  // 用if判断替代三元运算符
  if (!content) {
    return null;
  }
  // 只有条件满足时才调用函数，执行子元素逻辑
  return children();
};

2. 修改使用方式 #

将子元素包裹在一个函数中传入，这样函数内部的代码只会在组件允许时执行：

<AccessControl content={false}>
  {() => {
    console.log("Ashish"); // 当content为false时，这段代码不会执行
    return <div>This is executing</div>;
  }}
</AccessControl>

原理说明 #

这种方式的核心是延迟求值：原本直接传入的子元素会被React立即计算，而改成函数后，只有当组件调用children()时，函数内部的代码才会被执行，从而实现了真正的条件控制。

内容的提问来源于stack exchange，提问作者Profer