React开发中如何避免出现两层root根元素的冗余结构？

你要的效果可以通过以下两种主流方案实现：

• 方案1：使用React.Fragment（推荐）
  React内置的Fragment组件可以作为根容器包裹多个子元素，不会生成任何真实DOM节点，写法上还可以用<></>的语法糖简化，没有额外学习成本。
  原来的冗余写法：

  // 该写法会额外生成一层div#main-wrapper
  function App() {
    return (
      <div id="main-wrapper">
        <section>内容1</section>
        <section>内容2</section>
        ...
      </div>
    )
  }
  

  优化后的写法：

  // 该写法不会生成额外包裹节点
  function App() {
    return (
      <>
        <section>内容1</section>
        <section>内容2</section>
        ...
      </>
    )
  }
  

  如果你需要给Fragment加唯一标识（比如循环渲染场景），可以用完整的<React.Fragment key={xxx}>写法，不要使用语法糖。

• 方案2：直接返回元素数组
  React 16及以上版本支持组件直接返回DOM元素数组，只需要给每个元素添加唯一的key属性即可：

  function App() {
    return [
      <section key="section1">内容1</section>,
      <section key="section2">内容2</section>,
      ...
    ]
  }
  

  该方案适合动态生成多根节点的场景，静态场景下不如Fragment写法简洁。

如果原来的div#main-wrapper是用来承载全局样式、类名的，你可以直接把对应的样式规则配置到预置的div#root上，不需要额外新增包裹节点。

最终渲染出来的DOM结构完全符合你的预期：

<div id="root">
    <section></section>
    <section></section>
    . . .
</div>

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