javascript - 为什么在尝试使用 React 从另一个文件导入类时出现空白屏幕

Question

所以我是 React 框架的新手，我遇到了一个我无法调试的问题。

我正在尝试将项目中另一个文件中的另一个组件的类导入到我的 app.js 中。这个类现在什么都不做，只是在页面上显示文本“我的项目”。

当我使用 <Projects/> 在 app.js 中实例化它时我的应用程序从显示 app.js(我的应用程序)中的文本变为空白屏幕。

我希望它在下一行呈现文本“我的应用程序”，然后是“我的项目”。我错过了什么？

这是 app.js:

import React, { Component } from 'react';
import Projects from './Components/Projects';
import './App.css';

class App extends Component {
 render() {
  return (
  <div className="App">
    My App
    <Projects/>
  </div>
    );
  }
} 

export default App;

这是 Projects.js:

import React, { Component } from 'react';

class Projects extends Component {
  render() {
    return (
      <div className="Projects">
        My Projects
      </div>
    );
  }
}

export default Projects;

这是来自开发控制台的错误:

invariant.js:44 Uncaught Error: Invalid tag: data:application/octet-stream;base64,aW1wb3J0IFJlYWN0LCB7IENvbXBvbmVudCB9IG…MKICAgICAgPC9kaXY+IAogICAgKTsKICB9Cn0KZXhwb3J0IGRlZmF1bHQgUHJvamVjdHM7Cg==
at invariant (invariant.js:44)
at validateDangerousTag (ReactDOMComponent.js:345)
at new ReactDOMComponent (ReactDOMComponent.js:372)
at Object.createInternalComponent (ReactHostComponent.js:41)
at instantiateReactComponent (instantiateReactComponent.js:79)
at instantiateChild (ReactChildReconciler.js:44)
at ReactChildReconciler.js:71
at traverseAllChildrenImpl (traverseAllChildren.js:77)
at traverseAllChildrenImpl (traverseAllChildren.js:93)
at traverseAllChildren (traverseAllChildren.js:172)

这是产品结构的图片:

http://imgur.com/a/BKTK3

Answer 1

因为您将 Projects 组件的代码保存在一个没有 .js 扩展名的文件中，所以它被加载为一个文本文件。由于文本以小写字母 data:application... 开头，它被视为具有无效名称的自定义元素，因此出现 Invalid tag 错误。