面试题：React JSX 怎么进行内联条件渲染？请举例说明

在 React JSX 中，内联条件渲染是一种常见且高效的技术，它允许你根据条件直接在 JSX 中决定是否渲染某个元素或渲染哪个元素。以下是几种主要的内联条件渲染方法及示例：

---

1. 逻辑与操作符 && (短路求值)

这是最常用的内联条件渲染方式。当条件为 true 时，渲染 && 右侧的 JSX；为 false 时，不渲染任何内容（或渲染 null）。

适用场景：条件成立时显示某些内容，不成立时什么也不显示。

function Notification({ hasNewMessage, messageCount }) {
  return (
    <div>
      <h1>通知中心</h1>
      {/* 只有当 hasNewMessage 为 true 时，才渲染红色圆点 */}
      {hasNewMessage && <span className="red-dot">●</span>}
      
      {/* 只有当 messageCount > 0 时，才显示消息数量 */}
      {messageCount > 0 && (
        <span className="badge">
          {messageCount}
        </span>
      )}
    </div>
  );
}

注意：如果左侧的条件是 0、null、undefined、false 等“falsy”值，右侧的 JSX 不会渲染。但如果条件是 0，0 && <JSX> 会返回 0，这可能会在页面上显示数字 0。为避免此问题，确保条件是布尔值。

// 安全写法：将条件转换为布尔值
{Boolean(messageCount) && <span>{messageCount}</span>}

---

2. 三元运算符 ? :

当你需要在两个不同的 JSX 元素之间进行选择时，使用三元运算符。

适用场景：条件成立时渲染 A，不成立时渲染 B。

function LoginStatus({ isLoggedIn }) {
  return (
    <div>
      {/* 根据登录状态显示不同的按钮 */}
      {isLoggedIn ? (
        <button onClick={handleLogout}>退出登录</button>
      ) : (
        <button onClick={handleLogin}>登录</button>
      )}
    </div>
  );
}

// 更复杂的例子：渲染不同的组件
function UserProfile({ user }) {
  return (
    <div>
      {/* 如果 user 存在，显示用户信息；否则显示加载状态 */}
      {user ? (
        <div>
          <h2>{user.name}</h2>
          <p>{user.email}</p>
        </div>
      ) : (
        <p>正在加载用户信息...</p>
      )}
    </div>
  );
}

---

3. 使用变量存储 JSX

虽然不是完全“内联”，但将条件渲染的结果存储在变量中，然后在 JSX 中使用，也是一种常见且清晰的模式。

function StatusIndicator({ status }) {
  // 先计算要渲染的内容
  const statusElement = status === 'loading' ? (
    <span>🔄 加载中...</span>
  ) : status === 'success' ? (
    <span>✅ 成功</span>
  ) : (
    <span>❌ 失败</span>
  );

  return (
    <div>
      <p>当前状态: {statusElement}</p>
    </div>
  );
}

---

4. 避免的陷阱

❌ 不要在 if 语句中直接写 JSX

JSX 只能在 return 语句或 {} 内使用。你不能在 if 语句块中直接写 <div>...</div>。

// ❌ 错误写法
function BadExample({ show }) {
  if (show) {
    <div>这不会渲染！</div> // 语法错误
  }
  return null;
}

✅ 正确做法：使用上述方法

// ✅ 正确：使用 &&
function GoodExample({ show }) {
  return (
    <div>
      {show && <div>这会正确渲染</div>}
    </div>
  );
}

---

总结

方法	语法	适用场景
&& 操作符	{condition && <JSX />}	条件成立时渲染，不成立时不渲染。
三元运算符	{condition ? <JSX_A /> : <JSX_B />}	二选一渲染。
变量存储	const element = condition ? ... : ...;	复杂条件或需要复用渲染结果。

最佳实践：

• 优先使用 && 进行简单的“存在性”渲染。
• 使用三元运算符进行明确的“二选一”。
• 避免在条件中返回 undefined 或 true/false，它们不会渲染，但可能引起混淆。
• 对于复杂的条件逻辑，提取到变量或独立的函数/组件中以保持 JSX 清晰。