JSX报Adjacent JSX elements must be wrapped in an enclosing tag，已包裹仍报错怎么解决

直接导致Adjacent JSX elements must be wrapped in an enclosing tag报错的核心原因是：你仅对map循环内部的JSX做了包裹，没有处理组件return语句的根节点，当前return语句直接返回了<h2>和<div>两个同级的根元素，不符合React单根节点的要求。

同时你的代码还存在其他几处语法/逻辑错误，修复后才能正常运行：

• 变量声明顺序错误：你先调用data.map()生成dataList，之后才声明赋值data变量，执行时会因为data未定义抛出报错
• 转义符书写错误：你写的nbsp需要改为HTML转义符 才能正常显示空格
• 作用域混淆：组件内部定义的data变量属于组件内部作用域，在ReactDOM.render中直接写data={ data }会因为找不到data变量抛出报错
• 列表渲染缺少key：map循环生成JSX列表时需要给每个项添加唯一key属性，避免React抛出性能警告

修复后完整代码 #

import React from 'react';
import ReactDOM from 'react-dom';

function DataList() {
  // 先声明data再调用map方法
  const data = [
    { name: 'Daniel', age: 25 },
    { name: 'John', age: 24 },
    { name: 'Jen', age: 31 },
  ];

  const dataList = data.map(item => (
    // 给列表项添加唯一key
    <>
      <span key={item.name}>{item.name}</span>&nbsp;<span>{item.age}</span>
    </>
  ))

  // 外层用Fragment包裹所有返回元素，不会生成额外DOM节点
  return (
    <>
      <h2><span>Name</span>&nbsp;<span>Age</span></h2>
      <div>{dataList}</div>
    </>
  );
}

ReactDOM.render(
  <DataList />,
  document.getElementById('root')
);

如果需要通过props从外部传入data，可调整为以下写法：

import React from 'react';
import ReactDOM from 'react-dom';

// 组件内部从props取数据
function DataList(props) {
  const dataList = props.data.map(item => (
    <>
      <span key={item.name}>{item.name}</span>&nbsp;<span>{item.age}</span>
    </>
  ))
  return (
    <>
      <h2><span>Name</span>&nbsp;<span>Age</span></h2>
      <div>{dataList}</div>
    </>
  );
}

// 外部声明数据再传入组件
const data = [
  { name: 'Daniel', age: 25 },
  { name: 'John', age: 24 },
  { name: 'Jen', age: 31 },
];
ReactDOM.render(
  <DataList data={ data } />,
  document.getElementById('root')
);

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