jsx 中使用 if

在 React 中，你不能直接在 JSX 中使用 if 语句，但你可以使用 JavaScript 的条件表达式来实现类似的功能。这里有几种常见的方法来在 JSX 中实现条件渲染：

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

function MyComponent({ isLoggedIn }) {
  return <div>{isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}</div>;
}

2. 使用逻辑与 (&&)

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

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

function MyComponent({ isLoggedIn }) {
  return (
    <div>
      {(() => {
        if (isLoggedIn) {
          return <p>Welcome back!</p>;
        } else {
          return <p>Please log in.</p>;
        }
      })()}
    </div>
  );
}

4. 使用函数组件

你也可以将条件逻辑提取到一个函数组件中，然后在 JSX 中调用它。

function WelcomeMessage({ isLoggedIn }) {
  if (isLoggedIn) {
    return <p>Welcome back!</p>;
  } else {
    return <p>Please log in.</p>;
  }
}

function MyComponent(props) {
  return (
    <div>
      <WelcomeMessage isLoggedIn={props.isLoggedIn} />
    </div>
  );
}