React中如何在class='App'的div前添加多个静态HTML元素？

这个报错我太熟悉啦！React有个核心规则：组件返回的JSX必须是单个根元素，你直接放置四个相邻的<div>（三个空div加App的div），相当于返回了多个同级元素，自然就触发这个错误了。下面给你几个适配需求的解决方案：

方法1：使用JSX Fragment（推荐，无额外DOM节点） #

这是最常用的方案，Fragment不会在DOM中生成额外的元素，完美适配你的特殊样式需求。另外注意：JSX里要用className代替HTML的class哦，因为class是JavaScript的关键字。

function AppWrapper() {
  return (
    <>
      <div id="one"></div>
      <div id="two"></div>
      <div id="three"></div>
      <div className='App'>
        {/* 这里放原来App组件的内容 */}
      </div>
    </>
  );
}

方法2：使用React.Fragment组件 #

如果你的React版本比较旧，或者项目没有自动导入JSX相关语法，可以显式使用React.Fragment，效果和上面的短语法完全一样：

import React from 'react';

function AppWrapper() {
  return (
    <React.Fragment>
      <div id="one"></div>
      <div id="two"></div>
      <div id="three"></div>
      <div className='App'>
        {/* 这里放原来App组件的内容 */}
      </div>
    </React.Fragment>
  );
}

方法3：用额外容器div包裹（不推荐，会多DOM节点） #

这个方法会生成一个额外的父div，可能会影响你的样式布局，所以只有当你不在乎多一个DOM元素的时候才用：

function AppWrapper() {
  return (
    <div className="app-container">
      <div id="one"></div>
      <div id="two"></div>
      <div id="three"></div>
      <div className='App'>
        {/* 这里放原来App组件的内容 */}
      </div>
    </div>
  );
}

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