React render中使用IF ELSE构建HTML失效，请求问题排查

嘿，我明白你碰到的问题了——在React的JSX里直接写if/else语句是行不通的，因为JSX本质是React.createElement调用的语法糖，普通的if语句属于语句范畴，没法直接嵌在JSX的标签流里，所以才会被识别成纯文本输出。

针对你要在render里根据条件生成HTML内容的需求，给你几个常用的正确写法：

方法1：提前在JSX外处理条件内容（适合复杂多分支判断） #

先把不同条件下要渲染的内容提前用变量存好，再把变量嵌入到主JSX结构中：

render() {
  console.log('email' + this.state.email);
  // 根据email状态定义导航内容
  let navContent;
  if (this.state.email) {
    // 已登录时显示用户信息
    navContent = (
      <Nav className="ml-auto">
        <NavItem>
          <NavLink href="/profile">{this.state.email}</NavLink>
        </NavItem>
      </Nav>
    );
  } else {
    // 未登录时显示登录/注册
    navContent = (
      <Nav className="ml-auto">
        <NavItem>
          <NavLink href="/login">登录</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="/register">注册</NavLink>
        </NavItem>
      </Nav>
    );
  }

  // 把处理好的内容嵌入主JSX
  return (
    <Navbar style={styles.menu} color="faded" light expand="md">
      <NavbarBrand style={styles.image} href="/">
        <img src="../../images/op-logo.jpg"/>
      </NavbarBrand>
      {navContent} {/* 这里插入条件内容 */}
    </Navbar>
  );
}

方法2：用三元运算符嵌入JSX（适合简单二选一判断） #

三元运算符是表达式，可以直接嵌在JSX里，适合只有两种分支的场景：

render() {
  console.log('email' + this.state.email);
  return (
    <Navbar style={styles.menu} color="faded" light expand="md">
      <NavbarBrand style={styles.image} href="/">
        <img src="../../images/op-logo.jpg"/>
      </NavbarBrand>
      {/* 直接在JSX中用三元表达式做判断 */}
      {this.state.email ? (
        <Nav className="ml-auto">
          <NavItem>
            <NavLink href="/profile">{this.state.email}</NavLink>
          </NavItem>
        </Nav>
      ) : (
        <Nav className="ml-auto">
          <NavItem>
            <NavLink href="/login">登录</NavLink>
          </NavItem>
          <NavItem>
            <NavLink href="/register">注册</NavLink>
          </NavItem>
        </Nav>
      )}
    </Navbar>
  );
}

方法3：逻辑与（&&）短路判断（适合单条件渲染） #

如果只需要在满足条件时渲染某部分内容，用逻辑与运算符更简洁：

render() {
  console.log('email' + this.state.email);
  return (
    <Navbar style={styles.menu} color="faded" light expand="md">
      <NavbarBrand style={styles.image} href="/">
        <img src="../../images/op-logo.jpg"/>
      </NavbarBrand>
      <Nav className="ml-auto">
        {/* 只有email存在时，才渲染用户信息项 */}
        {this.state.email && (
          <NavItem>
            <NavLink href="/profile">{this.state.email}</NavLink>
          </NavItem>
        )}
        {/* 未登录时显示登录/注册 */}
        {!this.state.email && (
          <>
            <NavItem>
              <NavLink href="/login">登录</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="/register">注册</NavLink>
            </NavItem>
          </>
        )}
      </Nav>
    </Navbar>
  );
}

核心要点记住：JSX中只能嵌入表达式（能返回值的代码），而if/else是语句，不能直接写在JSX标签里。上面几种方法都是把条件判断转换成了JSX能识别的表达式形式~

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