React自定义组件条件渲染异常：条件为false时子内容仍执行

差异原因 #

• 原生{isLoggedIn && <div>...</div>}的逻辑是在父组件渲染阶段直接判断：当isLoggedIn为false时，&&后面的JSX表达式不会被求值，对应的React元素不会创建，自然不会触发userData.username的访问错误。
• 你的自定义组件中，children是在父组件传递给子组件前就完全解析执行了。JSX本质是React.createElement的语法糖，当你把<div><p>Hello, {userData.username}!</p></div>作为children传入时，这段代码会在父组件渲染时立即执行，不管子组件的condition是否为true，所以userData为null时直接报错。

修正方法 #

核心思路是延迟children的执行时机，让子组件在条件满足时才去渲染children内容，具体有两种实现方式：

方式1：将children改为函数传递 #

修改自定义组件，在条件满足时调用传入的函数：

import React from 'react';

function ConditionalRenderComponent({ condition, children }) {
  return (
    <div>
      {condition && children()}
    </div>
  );
}

export default ConditionalRenderComponent;

使用时把children写成函数形式：

// App组件内的使用代码
<ConditionalRenderComponent condition={isLoggedIn}>
  {() => (
    <div>
      <p>Hello, {userData.username}!</p>
      <p>Your email: {userData.email}</p>
    </div>
  )}
</ConditionalRenderComponent>

方式2：兼容普通children和函数children #

如果需要兼容两种使用场景（既支持普通JSX，也支持延迟执行的函数），可以给组件加类型判断：

import React from 'react';

function ConditionalRenderComponent({ condition, children }) {
  return (
    <div>
      {condition && (typeof children === 'function' ? children() : children)}
    </div>
  );
}

export default ConditionalRenderComponent;

这样当传入普通JSX时，逻辑和之前一致；传入函数时则会延迟执行，避免条件不满足时的错误。

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