定义的组件在 App.js 中不可访问答案

【问题标题】：Defined Component is not accessible in App.js定义的组件在 App.js 中不可访问
【发布时间】：2022-11-16 16:38:05
【问题描述】：

在我的 App.js 组件中无法访问我的 Home 组件。首页.jsx

import React from 'react'
import "./Home.scss



const Home = () => {
  return (
    <div>
      <div className="home">Home</div>
    </div>
  )
}

export default Home

这是我的 App.js 代码

import "./pages/home/Home"


function App() {
  return (
    <div className="App">
    <Home/>
    </div>
  );
}

export default App;

我面临错误：


[eslint] 
src/App.js
  Line 8:6:  'Home' is not defined  react/jsx-no-undef

Search for the keywords to learn more about each error.
ERROR in [eslint] 
src/App.js
  Line 8:6:  'Home' is not defined  react/jsx-no-undef

Search for the keywords to learn more about each error.

webpack compiled with 1 error

我希望访问 App.js 文件中的 Home 组件

【问题讨论】：

更改导入语句import "./pages/home/Home"至import Home from './pages/home/Home'
试试import Home from "./pages/home/Home"
尝试“./pages/home/Home”

标签： javascript reactjs

【解决方案1】：

在 App.js 你的导入应该是

import Home from "./pages/home/Home"

然后就可以使用了

【讨论】：

【解决方案2】：

像这样导入文件时添加参考

import Home from "./pages/home/Home";

【讨论】：

【解决方案3】：

尝试

import Home from "./pages/home/Home"

如果下次您不使用导出默认值，则需要进行解构

import {moduleA, moduleB} from "./pages/home/Home"

assume you are exporting moduleA and moduleB without export default keyword

【讨论】：