JSX 中条件渲染的几种方式

在 JSX 中，条件渲染是根据某个条件来有选择地渲染不同的内容。常用的几种条件渲染方法有：

1. 使用 if 语句

这是最常见的条件渲染方法之一，可以在函数中通过 if 语句控制渲染的内容。由于 JSX 本身不能直接使用 if 语句，但可以在函数体内使用。

function MyComponent({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign up.</h1>;
  }
}

2. 使用三元运算符 (? :)

三元运算符可以在 JSX 语法中直接用于条件渲染，是最常见的简洁方式之一。

function MyComponent({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
  );
}

• 如果 isLoggedIn 为 true，则显示 "Welcome back!"。
• 如果 isLoggedIn 为 false，则显示 "Please sign up."。

3. 使用 && 运算符（短路运算符）

&& 运算符可以在条件为 true 时渲染某个组件或内容，常用于只需要在满足条件时显示内容的情况。

function MyComponent({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn && <h1>Welcome back!</h1>}
    </div>
  );
}

• 只有 isLoggedIn 为 true 时，"Welcome back!" 才会被渲染。

4. 使用 || 运算符（逻辑或）

|| 运算符可以用于在条件为 false 时提供一个默认渲染的内容。

function MyComponent({ greeting }) {
  return (
    <div>
      {greeting || <h1>Hello, stranger!</h1>}
    </div>
  );
}

• 如果 greeting 存在，则渲染 greeting。
• 如果 greeting 不存在（false 或 null），则渲染 "Hello, stranger!"。

5. 条件渲染组件

可以将条件渲染的逻辑抽象为一个独立的组件，来分离逻辑和视图层的代码。

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

function MyComponent() {
  return <Greeting isLoggedIn={true} />;
}

6. 立即返回 null

在 React 中，如果想让组件不渲染任何内容，可以返回 null。

function MyComponent({ show }) {
  if (!show) {
    return null;
  }
  return <div>This is visible!</div>;
}

7. IIFE（立即调用函数表达式）

你可以在 JSX 内使用 IIFE 进行复杂的条件判断，虽然这种方法用得较少。

function MyComponent({ isLoggedIn }) {
  return (
    <div>
      {(() => {
        if (isLoggedIn) {
          return <h1>Welcome back!</h1>;
        } else {
          return <h1>Please sign up.</h1>;
        }
      })()}
    </div>
  );
}

总结：

• 简单条件渲染通常使用 && 或三元运算符 ? :。
• 复杂逻辑可以使用 if 语句或拆分成条件渲染的组件。
• 需要避免渲染时，可以返回 null。