[英]Why am I getting a blank white screen when trying to import a class from another file using React
So I'm brand new to the React framework, and I'm running into an issue that I am having trouble debugging. 所以我是React框架的新手,我遇到了一个我无法调试的问题。
I am trying to import a class from another component in another file in my project into my app.js. 我正在尝试将项目中另一个文件中的另一个组件导入到我的app.js. This class does nothing right now but display the text "My Projects" on the page. 此类现在不执行任何操作,但在页面上显示“我的项目”文本。
When I instantiate it in the app.js using <Projects/>
my app goes from displaying the text in the app.js (My App) to a blank white screen. 当我使用<Projects/>
在app.js中实例化它时,我的应用程序从显示app.js(我的应用程序)中的文本变为空白屏幕。
I'm expecting it to render the text "My App" then "My Projects" on the next line. 我期待它在下一行呈现文本“我的应用程序”然后“我的项目”。 What am I missing? 我错过了什么?
Here is the 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;
And here is the Projects.js: 这是Projects.js:
import React, { Component } from 'react';
class Projects extends Component {
render() {
return (
<div className="Projects">
My Projects
</div>
);
}
}
export default Projects;
Here is the error coming from the dev console: 以下是来自开发控制台的错误:
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)
And here's an image of the product structure: 这是产品结构的图像:
Because you saved code for Projects
component in a file without .js
extension, it was loaded as a text file. 因为您在没有.js
扩展名的文件中保存了Projects
组件的代码,所以它被加载为文本文件。 Since the text starts with lowercase letter data:application...
it is treated as a custom element with invalid name, hence Invalid tag
error. 由于文本以小写字母data:application...
开头data:application...
它被视为具有无效名称的自定义元素,因此Invalid tag
错误Invalid tag
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.