JSX中如何返回多个元素？未登录时渲染导航项遇阻

嘿，这个问题我之前踩过坑！React里确实没法直接返回多个相邻的JSX元素，不过现在有好几种靠谱的解决方式，我给你拆解一下：

1. 使用React Fragment（最推荐的方案） #

这是React官方推荐的方式，既能返回多个元素，又不会在DOM里多生成额外的容器节点。你可以用完整的<React.Fragment>标签，或者更简洁的短语法<> </>。

先改你的函数写法：

myFunction(){
  return(
    <>
      <NavItem onClick={this.login}>Log in</NavItem>
      <NavItem onClick={this.register}>Register</NavItem>
    </>
  )
}

或者用完整标签（适合需要加key的场景，比如循环里）：

myFunction(){
  return(
    <React.Fragment>
      <NavItem onClick={this.login}>Log in</NavItem>
      <NavItem onClick={this.register}>Register</NavItem>
    </React.Fragment>
  )
}

回到你最开始的导航渲染代码，直接用Fragment包裹else分支的两个元素就行：

<Nav>
  {this.state.user ? (
    <NavItem onClick={this.logout}>Log out</NavItem>
  ) : (
    <>
      <NavItem onClick={this.login}>Log in</NavItem>
      <NavItem onClick={this.register}>Register</NavItem>
    </>
  )}
</Nav>

2. 用容器元素包裹（不推荐，仅兼容旧版本） #

如果你的React版本比较老（低于v16.2），还不支持Fragment，可以用一个div或者其他语义化容器把多个元素包起来，但这样会在DOM里多一层不必要的节点，可能影响样式和性能：

myFunction(){
  return(
    <div>
      <NavItem onClick={this.login}>Log in</NavItem>
      <NavItem onClick={this.register}>Register</NavItem>
    </div>
  )
}

3. 返回元素数组（早期方案） #

在React v16之后，还可以直接返回一个元素数组，不过每个元素必须加上唯一的key属性：

myFunction(){
  return[
    <NavItem key="login" onClick={this.login}>Log in</NavItem>,
    <NavItem key="register" onClick={this.register}>Register</NavItem>
  ]
}

这种方式不用额外容器，但需要手动加key，写起来有点麻烦，所以还是Fragment更顺手。

总结一下，现在优先用Fragment的短语法，简洁又实用，完美解决你要返回多个NavItem的问题～

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