如何在React中实现组件的条件渲染？

如何在React中实现组件的条件渲染？

回答：在React中可以通过多种方式实现条件渲染，常见方法包括使用if语句、三元运算符、逻辑与（&&）操作符以及立即执行函数表达式（IIFE）。

示例代码：

function Greeting({ isLoggedIn }) {
  // 方法1：三元运算符
  return (
    <div>
      {isLoggedIn ? <p>欢迎回来！</p> : <p>请先登录。</p>}
    </div>
  );
}

// 方法2：逻辑与操作符（适用于只渲染“真”情况）
function AdminPanel({ isAdmin }) {
  return (
    <div>
      {isAdmin && <p>管理员面板</p>}
    </div>
  );
}

// 方法3：在render中使用if
function UserInfo({ user }) {
  if (!user) {
    return <p>用户未登录</p>;
  }
  return <p>你好，{user.name}</p>;
}

解析：

• 条件渲染的核心是根据JSX中JavaScript表达式的值决定是否渲染某个元素。
• 三元运算符适合两种状态间的切换；逻辑与（&&）适合仅在条件为真时渲染内容，因其短路特性。
• 在JSX中不能直接使用if/else语句，但可以在函数内部使用或包裹在IIFE中。
• 使用变量存储元素也是一种有效方式，可提升复杂条件下的可读性。
• 条件渲染不会影响DOM结构频繁重建，React会智能比较并更新。