React类组件无法识别render()中的div元素问题排查

你的代码本身逻辑无错误，导致div不被识别的原因大概率是JSX转译或项目配置问题，以下是具体排查方向：

• 文件后缀错误：你的代码使用了TypeScript类型标注（props: any），组件文件必须用.tsx后缀，而非.js或.ts；若为纯JS组件，也需用.jsx后缀，否则编译器不会处理JSX语法。
• 转译工具配置缺失：
  • 若用Babel，需确保安装@babel/preset-react并在配置文件中启用，它负责将JSX转译为浏览器可识别的JavaScript代码。
  • 若用TypeScript，检查tsconfig.json里的jsx字段，需设置为react（React 17之前）或react-jsx/react-jsxdev（React 17及之后），示例配置：

    {
      "compilerOptions": {
        "jsx": "react-jsx",
        // 其他配置项...
      }
    }
    

• 依赖安装不全：确认已正确安装react、react-dom及对应的转译依赖（如@babel/core、typescript等），缺失依赖会导致转译失败。

另外，你的组件类名LinkEditorr多了一个冗余的r，虽不影响JSX识别，但建议修正为LinkEditor以保证命名规范。

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