Question

我必须在App.js中导入多个文件。我的文件夹结构是

/src  
   /components       
     layout.js
   App.js  
   index.css
   index.js

我想从layout.js导入App.js文件。我的代码是

import React from 'react';
import Layout from './components/layout';

class App extends React.Component{
   render(){
       return ( 
          <div>
              <p>Hi</p>
          </div>
      );
   }
 }

 export default App;

在我的代码中，如何导入layout.js文件？

Answer 1

理想情况下，您的布局是一个可以简单导入主体的组件。创建新组件时，一个很好的实践是在components文件夹中创建一个单独的文件夹并创建index.js。通过这样做，您可以导入如下组件：

/src
/components
  /layout
    index.js
App.js
index.css
index.js



import React from 'react';
import Layout from './components/layout';

class App extends React.Component{
   render(){
       return ( 
          <div>
              <p>Hi</p>
              <Layout/>
          </div>
      );
   }
 }

 export default App;

Answer 2

看起来您正确导入了布局。如果它不起作用，也许您忘记了layout.js中的export default Layout

Answer 3

您需要使用webpack的resolve.extensions导入不以.js

结尾的文件路径

如何在React Js中导入文件路径？

3 个答案: