未捕获的错误:目标容器不是 DOM 元素.(React 网页不会显示任何内容) [英] Uncaught Error: Target container is not a DOM element. (React webpage won't show anything)
本文介绍了未捕获的错误:目标容器不是 DOM 元素.(React 网页不会显示任何内容)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在关注 Meteor 提供的教程但无法正确运行提供的代码.启动应用程序后，页面上没有任何显示.可能是什么问题呢?
我使用的是 Meteor 平台版本 1.7.我已经使用命令安装了 React 依赖项:
meteor npm install --save react react-dom我也在浏览器控制台中收到错误:
未捕获的错误:目标容器不是 DOM 元素.在不变(modules.js?hash=bbd33713066b742f1084320f9ea66e4052f533c1:3462)在 legacyRenderSubtreeIntoContainer (modules.js?hash=bbd33713066b742f1084320f9ea66e4052f533c1:22109)在渲染(modules.js?hash=bbd33713066b742f1084320f9ea66e4052f533c1:22190)在 Meteor.startup (main.js:8)在maybeReady (meteor.js?hash=0504f43f667698535416b00eb44eb6f53161cb63:927)在 HTMLDocument.loadingCompleted (meteor.js?hash=0504f43f667698535416b00eb44eb6f53161cb63:939)package.json:
<代码>{"name": "测试",私人":真的，脚本":{"start": "流星奔跑","test": "流星测试 --once --driver-package 流星测试:mocha","test-app": "TEST_WATCH=1 流星测试 --full-app --driver-package 流星测试:mocha","visualize": "meteor --production --extra-packages bundle-visualizer"},依赖关系":{"@babel/runtime": "^7.0.0","流星节点存根": "^0.4.1",反应":^ 16.6.0"，"react-dom": "^16.6.0"},流星":{主模块":{"client": "client/main.js",服务器":服务器/main.js"},"testModule": "tests/main.js"}}main.html:
<title>待办事项列表</title><身体><h1>你好！</h1><div id="render-target"></div>main.js:
从'react'导入React；从'流星/流星'导入{流星}；从'react-dom'导入{渲染}；从'../imports/ui/App.js'导入应用程序；Meteor.startup(() => {render(<App/>, document.getElementById('render-target'));});main.css:
body {填充:10px；字体系列:无衬线；}App.js:
import React, { Component } from 'react';从'./Task.js'导入任务；//应用组件 - 代表整个应用导出默认类 App 扩展组件 {获取任务(){返回 [{ _id: 1, text: '这是任务 1' },{ _id: 2, text: '这是任务 2' },{ _id: 3, text: '这是任务 3' },];}渲染任务(){返回 this.getTasks().map((task) => (<Task key={task._id} task={task}/>));}使成为() {返回 (<div className="容器"><标题><h1>待办事项列表</h1></标题><ul>{this.renderTasks()});}}
Task.js:
import React, { Component } from 'react';//任务组件 - 代表单个待办事项导出默认类任务扩展组件{使成为() {返回 (<li>{this.props.task.text}</li>);}}错误是:
<块引用>未捕获的错误:目标容器不是 DOM 元素.
解决方案
更新main.js文件如下
从'react'导入React；从'react-dom'导入{渲染}；从'流星/流星'导入{流星}；从'../imports/ui/App.js'导入应用程序；导入'./main.html'我已经导入了 main.html &它应该可以工作.
也没有上面的，你可以像这样删除blaze-template
meteor 移除 blaze-html-templates并添加静态如下
meteor 添加静态htmlI have been following the tutorial provided by Meteor but was unable to run the provided code properly. There is nothing displayed on the page after I start the application. What could be the problem?
I'm using Meteor platform version 1.7. I have installed React dependencies using a command:
meteor npm install --save react react-dom
I'm also getting error in the browser console:
Uncaught Error: Target container is not a DOM element.
at invariant (modules.js?hash=bbd33713066b742f1084320f9ea66e4052f533c1:3462)
at legacyRenderSubtreeIntoContainer (modules.js?hash=bbd33713066b742f1084320f9ea66e4052f533c1:22109)
at render (modules.js?hash=bbd33713066b742f1084320f9ea66e4052f533c1:22190)
at Meteor.startup (main.js:8)
at maybeReady (meteor.js?hash=0504f43f667698535416b00eb44eb6f53161cb63:927)
at HTMLDocument.loadingCompleted (meteor.js?hash=0504f43f667698535416b00eb44eb6f53161cb63:939)
package.json:
{
"name": "test",
"private": true,
"scripts": {
"start": "meteor run",
"test": "meteor test --once --driver-package meteortesting:mocha",
"test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
"visualize": "meteor --production --extra-packages bundle-visualizer"
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"meteor-node-stubs": "^0.4.1",
"react": "^16.6.0",
"react-dom": "^16.6.0"
},
"meteor": {
"mainModule": {
"client": "client/main.js",
"server": "server/main.js"
},
"testModule": "tests/main.js"
}
}
main.html:
<head>
<title>Todo List</title>
</head>
<body>
<h1>Hello!</h1>
<div id="render-target"></div>
</body>
main.js:
import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import App from '../imports/ui/App.js';
Meteor.startup(() => {
render(<App />, document.getElementById('render-target'));
});
main.css:
body {
padding: 10px;
font-family: sans-serif;
}
App.js:
import React, { Component } from 'react';
import Task from './Task.js';
// App component - represents the whole app
export default class App extends Component {
getTasks() {
return [
{ _id: 1, text: 'This is task 1' },
{ _id: 2, text: 'This is task 2' },
{ _id: 3, text: 'This is task 3' },
];
}
renderTasks() {
return this.getTasks().map((task) => (
<Task key={task._id} task={task} />
));
}
render() {
return (
<div className="container">
<header>
<h1>Todo List</h1>
</header>
<ul>
{this.renderTasks()}
</ul>
</div>
);
}
}
Task.js:
import React, { Component } from 'react';
// Task component - represents a single todo item
export default class Task extends Component {
render() {
return (
<li>{this.props.task.text}</li>
);
}
}
The error is:
Uncaught Error: Target container is not a DOM element.
解决方案
Update main.js file as like below
import React from 'react';
import { render } from 'react-dom';
import { Meteor } from 'meteor/meteor';
import App from '../imports/ui/App.js';
import './main.html'
I have imported main.html & it should work.
Also without above, you can remove blaze-template as like
meteor remove blaze-html-templates
and add static as like below
meteor add static-html
这篇关于未捕获的错误:目标容器不是 DOM 元素.(React 网页不会显示任何内容)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
