Question

我一直在遵循Meteor提供的教程但无法正确运行提供的代码。启动应用程序后，页面上没有任何显示。可能是什么问题呢？

我正在使用Meteor平台1.7版。我已经使用命令安装了React依赖项：

meteor npm install --save react react-dom

我在浏览器控制台中也遇到错误：

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"
  }
}

My file structure:

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>
    );
  }
}

错误是：

未捕获的错误：目标容器不是DOM元素。

Answer 1

如下更新<div className="buttons-toolbar"> <div className="left-group"> <button className="twitter-btn">Tweet</button> </div> <div className="right-group"> <button className="btn-primary">Next Quote</button> </div> </div>文件

.btn-toolbar {
    display: flex;
    justify-content: space-between;
}

.left-group {
    display: flex;
    flex: 1;
    justify-content: flex-start;
}

.right-group {
    display: flex;
    flex: 1;
    justify-content: flex-end;
}

我已经导入了main.js，它应该可以正常工作。

也没有以上内容，您可以像删除

import React from 'react';
import { render } from 'react-dom';
import { Meteor } from 'meteor/meteor';

import App from '../imports/ui/App.js';

import './main.html'

并添加如下所示的静态

main.html

Answer 2

如果包含package.json，那么找出问题所在会更加容易。此外，您应该签出create-react-app来以最小的麻烦快速引导反应应用程序。该文档非常简单明了，易于设置。希望这会有所帮助。

Answer 3

问题已解决！我必须删除blaze-html-templates并添加static-html

meteor remove blaze-html-templates
meteor add static-html

未捕获的错误：目标容器不是DOM元素。（反应式网页不会显示任何内容）

3 个答案:

未捕获的错误：目标容器不是DOM元素。 （反应式网页不会显示任何内容）

3 个答案:

未捕获的错误：目标容器不是DOM元素。（反应式网页不会显示任何内容）