Question

我想这样做

src/modules/layout/nav.js中的

...
export default NavBar;

src/modules/layout/side.js中的

...
export default sideBar;

src/modules/layout/index.js中的

import NavBar from './nav';
import sideBar from './side';
export { NavBar, sideBar };

src/modules/index.js中的

import * from './layout';

最后一位不起作用。根据教程，我可以转到src/App.js并使用navBar，如下所示：

从'./modules'导入{navBar};

但*不起作用的事实我不能这样做。有什么选择而不必像这样吗

src/modules/index.js中的

import * as All from './layout';
export All;

然后在App.js中，转到All.navBar。感觉很难看

Answer 1

嗯，我已经完成了你所拥有的东西;我觉得你真正需要的是理解这样做的原因。我很确定你想要实现的是从单个文件而不是从导出组件的文件中导入组件。

You don't want to do this:

＆＃13;

import NavBar from 'src/modules/layout/NavBar';
import SideBar from 'src/modules/layout/SideBar';

＆＃13;

但你想要的是从一个文件中导入所有组件，无论你想在哪里使用它们。因此，如果是这种情况，您就不需要添加更多复杂性。您只需要做的就是：

＆＃13;

// export the components like this
export default NavBar;
export default SideBar;

// Then, in your src/modules/layout/index.js file, import // the components you exported just the way you did it

import NavBar from './NavBar';
import SideBar from './SideBar';

export {
NavBar,
SideBar
}

// Hence, wherever you need both components, you can easily do this:
import { NavBar, SideBar } from '../index.js'

// From the above, you are just importing both components from the index.js file.

＆＃13;

所以，我相信这会回答你的问题。

Answer 2

只需添加Onyekachi Samuel的答案并回答标题的 all 部分即可

按照他的描述创建src/modules/layout/index.js文件后，可以通过以下方式导入所有文件：

import * as All from './layout'

并使用导出的组件：

<All.NavBar/> <All.SideBar/>

例如：

// Folder structure:
//    |-App.js
//    |-Layout
//        |-NavBar.js
//        |-SideBar.js
//        |-index.js


// App.js in the same location as Layout folder

import React from 'react';
import * as All from './layout

export default function App(props) {

    return (<div>
                <All.NavBar/>
                <All.SideBar/>
           </div>)
}

希望这可以在某些方面澄清它。

如何在React中导入所有组件？

2 个答案: