Question

我一直在使用一种收集组件文件的模式，用于导出目录中的index.js个文件，例如：

// index.js file in /components directory
export { Splash } from './Splash'
export { Portfolio } from './Porfolio'
export { Contact } from './Contact'

在Layout.js（位于根目录中）我可以通过一次调用整齐地导入：

import { Splash, Portfolio, Contact } from '.'

我在目录和子目录之间构建组件时使用了这种模式。

我的具体问题是询问是否有办法将此模式扩展到src/assets/img中收集的图像资源？我可以在我的images目录中放置一个index.js文件，并且能够将一组图像调用到一个组件吗？

//index.js in /src/assets/img directory
export { Img01 } from './img-01.png'
export { Img02 } from './img-02.jpg'
export { Img03 } from './img-03.svg'

//Call in Component.js
import { Img01, Img02, Img03 } from '../assets/img'

我认为这应该是可以实现的，但我无法弄清楚这种模式所需的正确语法或修改。任何代码示例或建议以获得更好的实践表示赞赏。提前谢谢！

Answer 1

要export默认组件，请执行以下操作：

export { default as Splash } from './Splash'
export { default as Portfolio } from './Porfolio'
export { default as Contact } from './Contact'

// you dont need to include the 'index' on the route, just do './' if you 
// are in the same directory, but your export file must be named index.js
import { Splash, Portfolio, Contact } from './';

要导出文件：images，css，.svg等，只需包含文件扩展名：

export { default as Img01 } from './img-01.png'
export { default as Img02 } from './img-02.jpg'
export { default as Img03 } from './img-03.svg'

//在Component.js中调用

import { Img01, Img02, Img03 } from '../assets/img'

Answer 2

如果您使用的是webpack，请查看此require。您可以使用require导入文件，如下例所示：

树目录

-image 
  |_index.js
  |_notification.png
  |_logo.png
-pages
  |-home.js

图像/ index.js

export const notification = require('./notification.png')
export const logo = require('./logo.png')

页/ home.js

import { notification } from '../images/'
<img src={notification} />

我希望我帮助你

使用index.js在React中导入多个图像资源

2 个答案: