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

时间:2020-06-25 12:59:42

标签: reactjs

在导入功能组件文件时如何在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();

1 个答案:

答案 0 :(得分:0)

尝试编写如下的Avatar组件

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