时间戳

首页 > 解决方案 > Index.js 文件中的文件夹结构，未找到模块错误

reactjs - Index.js 文件中的文件夹结构，未找到模块错误

问题描述

index.js导入功能组件文件时如何在文件中写入文件夹目录结构。

下面是带有错误的代码。我的文件夹目录结构是这样的。那么如何在我的代码或index.js文件中访问文件的导入和导出。

文件夹目录结构 - E:\reactapp\AvatarDemo\my-app

错误

Failed to compile.
    
        ./src/index.js
        Module not found: Can't resolve '.Avatar' in 'E:\reactapp\AvatarDemo\my-app\src'
        
        Failed to compile
        ./src/index.js
        Module not found: Can't resolve '.Avatar' in 'E:\reactapp\AvatarDemo\my-app\src'
        This error occurred during the build time and cannot be dismissed.

功能组件文件

import React from 'react';
const Avatar = () =>{
 <>
   return 
      <h1>Hello Welcome to the world of Functional Components</h1>
      <p>Naffy Kausar</p>      
  </>
}

export default Avatar;


//Index.js File
        import React from 'react';
        import ReactDOM from 'react-dom';
        import './index.css';
        //import App from './App';
        import Avatar from './Avatar';
        import * as serviceWorker from './serviceWorker';
        
        ReactDOM.render(<Avatar/>,document.getElementById("root"));
        
        serviceWorker.unregister();

标签： reactjs

解决方案

尝试Avatar像下面这样编写组件

import React from 'react';
const Avatar = () => (
  <>
      <h1>Hello Welcome to the world of Functional Components</h1>
      <p>Naffy Kausar</p>      
  </>
)

推荐阅读