Javascript React 自定义组件中的条件渲染问题

我在Reaction应用程序的自定义组件中遇到了一个条件呈现问题.我一直致力于创建一个用于条件呈现的定制组件，该组件仅在满足特定条件时呈现内容.以下是我到目前为止拥有的代码

import React from 'react';

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

export default ConditionalRenderComponent;

在使用这个定制组件时，我注意到，即使在condition是false的情况下，也可以访问和执行通过childrenprops 传递的内容.这种行为不同于我在没有定制组件的情况下直接使用condition && <div></div>时的行为，当条件为false时，它正确地防止了内容被访问.

Here's how I'm using the custom component:个

import React, { useState, useEffect } from 'react';
import ConditionalRenderComponent from './ConditionalRenderComponent';

function App() {
  const [userData, setUserData] = useState(null);
  const isLoggedIn = userData !== null;

  useEffect(() => {
    setTimeout(() => {
      setUserData({
        username: 'john_doe',
        email: 'john@example.com'
      });
    }, 1000);
  }, []);

  return (
    <div>
      <h1>Welcome to My App</h1>
      <ConditionalRenderComponent condition={isLoggedIn}>
        <div>
          <p>Hello, {userData.username}!</p>
          <p>Your email: {userData.email}</p>
        </div>
      </ConditionalRenderComponent>
      {!isLoggedIn && <p>Please log in to access user data.</p>}
    </div>
  );
}

export default App;

在上面的示例中，userData最初是null，后来填充了从服务器检索的数据.isLoggedIn条件取决于是否填充了userData.

然而，即使isLoggedIn条件为false(在获取数据之前)，ConditionalRenderComponent内的内容仍试图访问和显示userData.这会导致错误消息:"TypeError:Cannot Read Property of NULL(Reading‘Username’)".

Comparison with standard conditional rendering:个

以下是使用标准condition && <div></div>方法的行为比较:

// Standard conditional rendering
{isLoggedIn && (
  <div>
    <p>Hello, {userData.username}!</p>
    <p>Your email: {userData.email}</p>
  </div>
)}

如上面的代码所示，当条件为false时，使用标准方法可以正确地防止访问userData个值.

我不确定为什么在使用带有childrenprops 的自定义组件时会出现这种行为差异.我试着调试和寻找解决方案，但一直未能找到明确的答案.

我真的很感激任何关于为什么会发生这种行为的见解或建议，以及我如何修改自定义组件以使用childrenprops 实现预期的条件呈现行为.

提前感谢您的帮助！