个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 02:13:32 24 4
gpt4 key购买 nike

我正在做一个简单的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 类(无法在代码中删除它)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com