React应用遇‘Target container is not a DOM element’错误，已试多方案无效求助

我来帮你一步步搞定这个问题，这个报错通常和React挂载的目标DOM元素、组件结构或者代码语法漏洞有关，咱们逐个排查修复：

1. 修正App组件的根元素问题 #

你的App组件直接返回了<body>标签，这是不符合React规范的。React应用应该挂载到HTML页面中预先存在的一个DOM容器（比如public/index.html里的<div id="root"></div>），而不是直接渲染<body>。把App里的<body>换成<div>就好：

// 主组件文件修改后
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Header from './components/Header.js';
import Summary from './components/Summary.js';
import Education from './components/Education.js';
import Project from './components/Project.js';
import Experience from './components/Experience.js';

class App extends Component {
  render() {
    // 将<body>替换为<div>作为根容器
    return (
      <div className="App">
        <Header />
        <Summary />
        <Education />
        <Experience />
        <Project />
      </div>
    );
  }
}

export default App;

2. 修复Project组件的语法错误 #

你的projects数组有两个明显问题：

• 重复定义了detail属性，后面的会直接覆盖前面的，如果你想存多个详情，建议改成数组形式；
• 数组末尾缺少闭合的}和]，这会触发JS语法错误，间接导致渲染失败。

修改后的Project组件：

// Project组件文件修改后
import React from 'react'; // 函数组件不需要Component和ReactDOM

function Project(props) {
  // 加个兜底判断，避免props未传projects时map报错
  const content = (props.projects || []).map((project) => 
    <div key={project.id}>
      <h3 className="ProjectTitle">{project.title}</h3>
      {/* 多个详情用换行分隔展示 */}
      <p className="ProjectDetail">{project.details.join('<br>')}</p>
    </div>
  );
  return(
    <div>
      {content}
    </div>
  );
}

// 修正数组语法，把重复的detail改为details数组
const projects = [
  {
    id: 1, 
    title: 'Consumer Electronics Retailer Web Application', 
    details: [
      'Consumer Electronics Retailer Web Application1', 
      'Consumer Electronics Retailer Web Application2', 
      'Consumer Electronics Retailer Web Applicat...'
    ]
  }
];

export default Project; // 别忘了导出组件

3. 确认入口文件的挂载目标 #

检查你的index.js（应用入口文件），确保ReactDOM.render的目标是正确的DOM元素，且这个元素在public/index.html中存在：

// index.js示例代码
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { projects } from './components/Project'; // 导入projects数组

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App projects={projects} /> {/* 把projects传递给App组件 */}
  </React.StrictMode>
);

同时要保证public/index.html里的<div id="root"></div>在script标签之前，这样React执行渲染时，目标DOM元素已经加载完成：

<!-- public/index.html 示例 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <!-- 这个容器必须存在，且在script标签之前 -->
    <div id="root"></div>
    <script src="/static/js/bundle.js"></script>
  </body>
</html>

最后一步：传递数据到Project组件 #

在App组件里调用Project时，要把projects数组作为props传进去：

// 在App组件的render中修改Project调用
<Project projects={this.props.projects} />

做完这些修改后，「Target container is not a DOM element」的错误应该就能解决，你的map遍历也能正常渲染内容了。

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