为何JSX中无法使用if-else语句？技术原理咨询

你的猜想完全正确——问题根源就是if-else是语句，而JSX的{}里只支持表达式。

先理清楚底层逻辑：JSX是React.createElement()调用的语法糖，最终会被编译成JavaScript对象。JSX规则明确，{}包裹的区域必须是能返回具体值的表达式，不能放流程控制类的语句。

简单区分下表达式和语句：

• 表达式：是能算出结果的代码，比如2+3、user.nickname、condition ? a : b、getUserInfo()这些，它们最终会产出一个值（数字、字符串、对象甚至React元素）。
• 语句：像if-else、for、switch这类，是用来控制代码执行流程的，它们本身不会返回任何值，自然没法被JSX解析成有效的元素。

举个直观的错误示例，这样写肯定报错：

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {
        // 这里直接写if-else会触发语法错误
        if (isLoggedIn) {
          <h1>欢迎回来！</h1>
        } else {
          <h1>请先注册。</h1>
        }
      }
    </div>
  );
}

想要实现条件渲染，有几种常用的替代方案：

1. 提前用if-else把结果存到变量里，再放到JSX中：

function Greeting({ isLoggedIn }) {
  let content;
  if (isLoggedIn) {
    content = <h1>欢迎回来！</h1>;
  } else {
    content = <h1>请先注册。</h1>;
  }
  return <div>{content}</div>;
}

2. 用三元表达式（这是表达式，符合JSX要求）：

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>欢迎回来！</h1> : <h1>请先注册。</h1>}
    </div>
  );
}

3. 简单条件下用逻辑与运算符：

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn && <h1>欢迎回来！</h1>}
    </div>
  );
}

总之，核心就是JSX的{}只认表达式，if-else属于语句范畴，所以没法直接嵌入使用。你的猜测完全命中了问题的本质。

内容的提问来源于stack exchange，提问作者chozzaman