javascript - ReactJS遇到 "Target container is not a DOM element"，尝试了很多解决方案但没有成功-6ren

javascript - ReactJS遇到 "Target container is not a DOM element"，尝试了很多解决方案但没有成功

转载作者：行者123 更新时间：2023-12-03 02:13:32

24

4

我正在做一个简单的React应用程序，我想编写一个函数来使用map()循环遍历我的数组并将它们显示在页面上，但是我遇到了一个问题“目标容器不是DOM元素” ，我在网上尝试了很多解决方案，但没有一个对我有用，有谁可以帮助我，谢谢。

这是第一个文件，它显示每个元素。

   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() {
      return (
        <body className="App">
         <Header />
          <Summary />
           <Education />
            <Experience />
             <Project />
        </body>
        );
     }
   }

   export default App;

这是第二个文件，用于项目显示。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

function Project(props) {
  const content = props.projects.map((project) =>
    <div key={project.id}>
      <h3 className="ProjectTitle">{project.title}</h3>
      <p className="ProjectDetail">{project.detail}</p>
    </div>
  );

  return(
    <div>
      {content}
    </div>
  );
}

const projects = [
  {id: 1, title: 'Consumer Electronics Retailer Web Application',
    detail: 'Consumer Electronics Retailer Web Application1',
    detail: 'Consumer Electronics Retailer Web Application2',
    detail: 'Consumer Electronics Retailer Web Application3'},
  {id: 2, title: 'Hotel Reservation Web Application',
    detail: 'Hotel Reservation Web Application1',
    detail: 'Hotel Reservation Web Application2',
    detail: 'Hotel Reservation Web Application3'},
  {id: 3, title: 'Android Library Management Application',
    detail: 'Android Library Management Application1',
    detail: 'Android Library Management Application2',
    detail: 'Android Library Management Application3'}
];

ReactDOM.render(
  <Project projects={projects} />,
    document.getElementById('Project')
);

export default Project;

最佳答案

在页面中要引用的任何 DOM 元素之后导入 app 脚本至关重要。

ReactDOM.render(<Project projects={projects} />, document.getElementById('Project'));

在这种情况下，您需要确保有一个 DOM 元素带有 id="Project" ，并且您的项目脚本将添加到文档正文中(在该元素之后)，以便能够引用该特定元素。

<body>
<div id="Project"></div>
<script src="/bundles-here.js" type="text/javascript"></script>
</body>

检查index.html您在浏览器中看到并在正文中搜索空 div具有 id 的元素(可能您会找到 id="root" 。)然后在 render 中使用该 id 属性.

我还注意到你的<App/>组件正在渲染 <body>标签。我认为你应该将其更改为 <div> 。并且因为App组件包括您的Project组件，更新您的 react-dom 是有意义的渲染调用:

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

这次您将渲染所有组件，包括 <Project> .

您还可以查看此react-seed和 webpack-demo具有代码示例和工作的项目 webpack-4配置react应用程序

关于javascript - ReactJS遇到 "Target container is not a DOM element"，尝试了很多解决方案但没有成功，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49453876/

24

4

0

文章推荐： javascript - 改变获取期权值(value)

文章推荐： javascript - 数组过滤器 linq 未返回预期结果

文章推荐： javascript - 删除全局对象中的属性(误解)

文章推荐： javascript - 需要删除一个 P 类(无法在代码中删除它)

visual-studio-2010 - Visual Studio 2010 Professional 解决方案/项目是否与 Visual Studio 2010 Premium 解决方案/项目 100% 兼容？
我只是想知道要安装哪个版本的 Visual Studio 2010(专业版或高级版)提示升级项目.. 项目包括:asp.net mvc、数据库和silverlight。最佳答案通常，由不同版本的相
【解决方案】基于数据库驱动的自定义TypeHandler处理器
目录前言 1、TypeHandler 简介 1.1转换步骤 1.2转换规则 2、JSON 转换 3、枚举转换 4、文章小结
【解决方案】Java互联网项目中常见的Redis缓存应用场景
目录前言 1、常见 key-value 2、时效性强 3、计数器相关 4、高实时性 5、排行榜系列 6、文章小结前言在笔者 3 年的
【解决方案】Java互联网项目中消息通知系统的设计与实现（下）
目录前言四、技术选型五、后端接口设计 5.1业务系统接口 5.2App 端接口六、关键逻辑实现 6.1Red
【解决方案】Java互联网项目中消息通知系统的设计与实现（上）
目录前言一、需求分析 1.1发送通知 1.2撤回通知 1.3通知消息数 1.4通知消息列表二、数据模型设计
【解决方案】多租户技术架构设计入门（一）
目录前言一、多租户的概念二、隔离模式 2.1独立数据库模式 2.2共享数据库独立数据架构 2.3共享数据库共享数据架构
【解决方案】MySQL中的死锁问题还能这样解决（文末送书）
导读：虽然锁在一定程度上能够解决并发问题，但稍有不慎，就可能造成死锁。本文介绍死锁的产生及处理。死锁的产生和预防发生死锁的必要条件有4个，分别为互斥条件、不可剥夺条件、请求与保持条件和循环等待条
javascript - 获取波斯月的最后一天 + 解决方案
在浏览网页后，我找不到任何功能来执行此操作，我有可行的个人解决方案。也许它对某人有用。 **使用 Moment 插件转换日期。***moment(currentPersianDate).clone()
检测数字手写的 OCR 解决方案？
是否有一种解决方案可以很好地处理数字(1-10)手写？我试过tesseract，但我得到的只是垃圾。理想情况下是 OSS，但商业也可以。最佳答案 OpenCV 现在带有手写数字识别 OCR 示例。
multithreading - Delphi死锁解释/解决方案
在服务器应用程序上，我们有以下内容:一个称为 JobManager 的单例类。另一个类，Scheduler，不断检查是否需要向 JobManager 添加任何类型的作业。当需要这样做时，调度程序会执
javascript - 用于在应用程序中处理和捕获错误的工具/解决方案
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。想改进这个问题？将问题更新为 on-topic对于堆栈溢出。 5年前关闭。 Improve this qu
r - 解决方案。有代理时如何install_github
当您尝试从 GitHub 存储库安装某些 R 包时 install_github('rWBclimate', 'ropensci') 如果您遇到以下错误: Installing github repo
WPF 字体模糊问题-解决方案
问题在以下链接中进行了描述和演示: Paul Stovell WPF: Blurry Text Rendering www.gamedev.net forum Microsoft Connect: W
用于科学记数格式格式化的 R 解决方案
我正在寻找一种解决方案，使用标准格式 a × 10 b 在科学记数法下格式化 R 中的数字。一些同行评审的科学期刊都要求这样做，并且手动修改图表可能会变得乏味。下面是 R 标准“E 表示法”的示例，
java - 如何从另一个java应用程序内部启动资源jar - 解决方案
已编辑解决方案(如下...) 我有一个启动画面，它被打包到它自己的 jar 中。它有效。我可以通过以下方式从另一个 java 应用程序内部调用 Splash.jar: Desktop.getDesk
用于创建门户的 .NET 解决方案
什么是创建像 PageFlakes 或 iGoogle 这样的门户网站的好框架/包？？我们希望创建一个为员工提供 HR 服务的员工/HR 门户，但我们也需要一种足够灵活的产品，以便我们可以使用它来为
用于科学记数格式格式化的 R 解决方案
我正在寻找一种解决方案，使用标准格式 a × 10 b 在科学记数法下格式化 R 中的数字。一些同行评审的科学期刊都要求这样做，并且手动修改图表可能会变得乏味。下面是 R 标准“E 表示法”的示例，
search - 解决方案+遗传
如何将 solr 与 heritrix 集成？我想使用 heritrix 归档一个站点，然后使用 solr 在本地索引和搜索该文件。谢谢最佳答案使用 Solr 进行索引的问题在于它是一个纯文本
jquery - 全日历工作时间 [解决方案]
完整日历不包含工作时间功能选项(在任何一天的议程 View 中选择第一行和最后一行 - 例如公司不工作)。我做到了类似的事情: viewDisplay: function(view){
将下拉子菜单保留在屏幕内的 jQuery 解决方案
我正在使用 bootstrap 作为我的下拉菜单。但有一个问题，如果我的下拉菜单有多级子菜单，那么它会显示在屏幕上，并出现底部滚动条。如何将子菜单保留在屏幕内，我需要一个 jQuery 解决方案。

首页

博学

6Ren·AI

商城

javascript - ReactJS遇到 "Target container is not a DOM element"，尝试了很多解决方案但没有成功