React组件在vscode中未呈现并变灰答案

【问题标题】：React component not rendering and greyed out in vscodeReact组件在vscode中未呈现并变灰
【发布时间】：2021-11-28 16:13:55
【问题描述】：

组件加载不正确。它也是灰色的。该应用程序很简单，只有一个组件，其中只有一个 div。但是我似乎无法导入它。以前从未遇到过这个问题。也许我错过了一些 idk。我在过去 5 个小时里一直在努力解决这个问题。也许是问题在我的 system.plz 帮助下。

counterr.js 的代码

import React from 'react'

function counterr () {
    return (
        <div>
            hello from counter
        </div>
    );
}

export default counterr;

app.js 的代码

import react from 'react';
import './App.css';
import counterr from './components/counterr'

function App() {
  return (
    <div>
    1234
     <counterr/>
    5678
    </div>
  )
}

export default App;

计数器组件

app.js

渲染应用不会加载 counterr 组件

【问题讨论】：

标签： javascript node.js reactjs visual-studio-code frontend

【解决方案1】：

React（函数式或类）组件必须以大写字母开头

【讨论】：

【解决方案2】：

你的函数组件需要大写。

import React from "react";

function Counterr() {
  return <div>hello from counter</div>;
}

export default Counterr;

还有 App.js：

import Counterr from "./components/counterr";

export default function App() {
  return (
    <div>
      1234
      <Counterr />
      5678
    </div>
  );
}

【讨论】：