使用React Admin启动项目报错React.Children.only期望单个子元素如何解决

问题修复方案 #

你遇到的React.Children.only expected to receive a single React element child报错，核心是某一个声明了仅接受单个子元素的父组件，被传入了0个或多个直接子元素，针对你的React Admin项目，按以下优先级排查即可：

• 首先检查你自定义的ItensList、ItensShow、ItensCreate、ItensEdit四个组件，确认组件的返回值是否存在多个同级根节点没有被包裹的情况。React要求单组件返回的JSX只能有一个根节点，如果你需要返回多个同级元素，用<>（React 空标签）或者任意容器组件包裹即可。
• 你当前代码中ItensEdit和ItensCreate都从./create/itens路径引入，确认该文件的导出逻辑是否正确，没有出现导出多节点、或者组件定义错误的问题。
• 若以上组件没有问题，检查react-admin和react-admin-firebase的版本兼容性，可执行以下命令升级到官方稳定兼容版本：

npm install react-admin@latest react-admin-firebase@latest

• 快速验证逻辑：你可以先将Admin内的Resource组件替换为简单的单节点测试内容，确认报错是否消失：

const App = () => (
  <Admin dataProvider={dataProvider} authProvider={authProvider}>
    <span>测试内容</span>
  </Admin>
);

如果替换后报错消失，即可确认是你自定义的四个业务组件存在多根节点问题，逐个修复即可。

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