Fatal编程技术网
  • javascript/
  • Javascript 与“接触”；目标容器不是DOM元素"；，尝试了很多解决方案，但没有成功

Javascript 与“接触”；目标容器不是DOM元素"；，尝试了很多解决方案，但没有成功

javascript reactjs

Javascript 与“接触”；目标容器不是DOM元素"；，尝试了很多解决方案，但没有成功,javascript,reactjs,frontend,webpack-4,react,Javascript,Reactjs,Frontend,Webpack 4,React,我正在做一个简单的react应用程序，我想编写一个函数，使用map（）循环我的数组并在页面上显示它们，但我遇到了一个问题，即“目标容器不是DOM元素”，我在网上尝试了很多解决方案，但没有一个对我有效，有人可以帮助我吗，谢谢 这是第一个文件，显示每个元素 import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import Header fro

我正在做一个简单的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}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“./components/Header.js”导入标题；
从“/components/Summary.js”导入摘要；
从“/components/Education.js”导入教育；
从“./components/Project.js”导入项目；
从“/components/Experience.js”导入经验；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；
这是第二个文件，用于项目显示

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;

import React，{Component}来自'React'；
从“react dom”导入react dom；
功能项目（道具）{
const content=props.projects.map（（项目）=>
{project.title}

{project.detail}

);
返回(
{content}
);
}
施工项目=[
{id:1，标题：'消费电子产品零售商Web应用程序'，
详细信息：“消费电子产品零售商Web应用程序1”，
详细信息：“消费电子产品零售商Web应用程序2”，
详细信息：'消费电子产品零售商Web应用程序3'}，
{id:2，标题：'酒店预订Web应用程序'，
详细信息：“酒店预订Web应用程序1”，
详细信息：“酒店预订Web应用程序2”，
详细信息：'酒店预订Web应用程序3'}，
{id:3，标题：“Android库管理应用程序”，
详细信息：“Android库管理应用程序1”，
详细信息：“Android库管理应用程序2”，
详细信息：“Android库管理应用程序3'}
];
ReactDOM.render(
,
document.getElementById（'项目'）
);
导出默认项目；
在页面中任何要引用的DOM元素之后导入应用程序脚本至关重要

ReactDOM.render(<Project projects={projects} />, document.getElementById('Project'));
检查您在浏览器中看到的
index.html
并在正文中搜索具有
id
的空
div
元素（可能会找到
id=“root”
），然后在
渲染中使用该id属性


我还注意到你的
和带有代码示例和应用程序工作配置的项目
你的DomeElement和项目id在哪里？我有点理解，但我不确定如何修改代码，你能帮我吗？谢谢。您使用的是什么构建工具？网页包？或者只是一个静态的
index.html
？-你需要更新你的html文件。我不确定，我是React新手，只是按照官方指南安装了React。我在命令行中使用npm命令创建了应用程序，并在js文件中编码。Ok。我不会将该初学者项目用于我的react应用程序，因为我喜欢自己配置该项目。但是如果不更改mount元素的id，它可能会工作。我认为这两个简单的项目对你有帮助：和。你可以在这些网页中找到一个配置了webpack的react应用程序。

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



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