[英]React component not rendering also not showing up
As you can see below the my react component is not rendering also in vscode its greyed out (line 2 first picture).正如您在下面看到的,我的反应组件也没有在 vscode 中呈现,它呈灰色(第 2 行第一张图片)。 Dont know what I am doing wrong不知道我做错了什么
import React, { Fragment, useEffect } from 'react';
import counterComponent from './components/counterComponent';
function App() {
return (
<Fragment >
<h1>hello</h1>
<counterComponent/>
</Fragment>
)
};
export default App;
First of all capitalize your component names.首先将您的组件名称大写。 so CounterComponent
instead of counterComponent
.所以CounterComponent
而不是counterComponent
。
Second you're exporting counterComponent twice.其次,您要导出 counterComponent 两次。
export const
.... export const
....
and export default
in the bottom.并在底部export default
。 Choose one and change your import according to whichever you choose..选择一个并根据您选择的任何一个更改您的导入..
You need to import counter component with {} As its export const Import {CounterComp.net} from …您需要使用 {} 导入计数器组件作为其导出常量 Import {CounterComp.net} from …
because you are doing something wrong counterComponents correctly, look at you App.js
file or the second Image and look at line number 2(it is a little dark-ish) because you are not using it right.因为你正确地做错了 counterComponents,请查看你的App.js
文件或第二个图像并查看第 2 行(它有点暗),因为你没有正确使用它。 Also you are default and modular exporting counterComponent
do any one of them, I usually do it like this你也是默认和模块化出口counterComponent
做其中任何一个,我通常这样做
import React, { Fragment} from "react";
function counterComponent () {
return (
<Fragment>
<h1>hello</h1>
</Fragment>
);
}
export default counterComponent;
If that doesn't work, My suggestion is check again if there is not any spelling mistake or you are importing from the right location如果这不起作用,我的建议是再次检查是否没有任何拼写错误或者您是从正确的位置导入的
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.