React报错：跟随2019年教程操作是否属于过时问题？

• 先确认组件导入是否正确
  不管是用第三方UI库还是自定义组件，第一步必须确保导入语句没问题：

  • 第三方库示例（以Ant Design为例）：
    先安装依赖：npm install antd
    然后在代码里导入：import { Card } from 'antd';
  • 自定义组件示例：
    确认Card组件文件路径正确，比如：import Card from './components/Card';，同时检查自定义的Card文件里有没有语法错误（比如未闭合的标签、return语句错误）。

• 检查根节点的JSX结构
  React要求根渲染节点下只能有一个直接父元素，如果你直接写多个而没包裹，就会报错：

  // 错误写法：多个同级元素无包裹
  root.render(
    <Card />,
    <Card />
  );
  

  改成用Fragment（<></>）或者div包裹：

  // 正确写法
  root.render(
    <>
      <Card />
      <Card />
    </>
  );
  

• 排查第三方库版本兼容问题
  如果你用的是较新的React版本（比如React 18），要确认UI库是否支持当前React版本。比如有些旧版UI库可能和React 18不兼容，这时要么升级UI库版本，要么降级React版本（不推荐）。

• 查看具体报错信息
  打开浏览器控制台（F12），看具体的错误提示：

  • 如果提示Card is not defined：就是没导入组件或者导入路径错了；
  • 如果提示Adjacent JSX elements must be wrapped...：就是根节点的元素没包裹；
  • 如果是组件内部报错：检查自定义Card组件的代码逻辑。

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