javascript - React - 我有六个文件导出一个变量，并希望从一个文件中导出所有变量

Question

我有 6 个文件

美食之家.jsx

import _range from 'lodash/range';
// eslint-disable-next-line global-require, import/no-dynamic-require
export default _range(1, 5).map(i => require(`assets/experiences/gastronomia/${i}.png`));

驱逐出境.jsx

import _range from 'lodash/range';
// eslint-disable-next-line global-require, import/no-dynamic-require
export default _range(1, 3).map(i => require(`assets/experiences/deporte/${i}.png`));

转移.jsx

import _range from 'lodash/range';
// eslint-disable-next-line global-require, import/no-dynamic-require
export default _range(1, 4).map(i => require(`assets/experiences/diversion/${i}.png`));

礼品卡.jsx

import _range from 'lodash/range';
// eslint-disable-next-line global-require, import/no-dynamic-require
export default _range(1, 12).map(i => require(`assets/experiences/giftcard/${i}.png`));

belleza.jsx

import _range from 'lodash/range';
// eslint-disable-next-line global-require, import/no-dynamic-require
export default _range(1, 3).map(i => require(`assets/experiences/belleza/${i}.png`));

productos.jsx

import _range from 'lodash/range';
// eslint-disable-next-line global-require, import/no-dynamic-require
export default _range(1, 2).map(i => require(`assets/experiences/productos/${i}.png`));

我想把所有这些都放在一个文件 providers.jsx 中，每个文件都作为一个常量，例如：

 const gastronomiaExperience = _range(1, 2).map(i => require(`assets/experiences/productos/${i}.png`));
 const deporteExperience = _range(1, 3).map(i => require(`assets/experiences/deporte/${i}.png`));

然后导出这 6 个常量，以便我可以将它们用作另一个文件中的数组？

我试过这样做，但不知道它是否正确

import _range from 'lodash/range';
// eslint-disable-next-line global-require, import/no-dynamic-require

const gastronomiaExperience =  _range(1, 5).map(i => require(`assets/experiences/gastronomia/${i}.png`));

const giftcardExperience = _range(1, 12).map(i => require(`assets/experiences/giftcard/${i}.png`));

const deporteExperience =  _range(1, 3).map(i => require(`assets/experiences/deporte/${i}.png`));

const productosExperience = _range(1, 2).map(i => require(`assets/experiences/productos/${i}.png`));

const diversionExperience = _range(1, 4).map(i => require(`assets/experiences/diversion/${i}.png`));

const bellezaExperience = _range(1, 3).map(i => require(`assets/experiences/belleza/${i}.png`)); 

export default (gastronomiaExperience, giftcardExperience, deporteExperience, productosExperience, diversionExperience, bellezaExperience);

标签： javascriptreactjs

Answer 1

另一种选择是拥有另一个包含这些文件的文件，例如constants.js，然后在该文件中：

// constants.js
import gastronomia from './gastronomia'
import deporte from './deporte'
import diversion from './diversion'
etc

export { gastronomia,  deporte, diversion, etc. }

然后在您的目标模块中，您可以将它们全部导入一行：

import { gastronomia,  deporte, diversion, etc. } from './constants.js'

前面需要做更多的工作，但最终你会得到一个文件来管理你的导入和导出，并且在使用这些常量的目标模块中，你只需一行将它们全部导入。这是我的首选方法，它使一切井井有条。

编辑：

您可以将所有常量粘贴在声明它们的文件末尾的单个对象中：

import _range from 'lodash/range';
// eslint-disable-next-line global-require, import/no-dynamic-require

const gastronomiaExperience =  _range(1, 5).map(i => require(`assets/experiences/gastronomia/${i}.png`));

const giftcardExperience = _range(1, 12).map(i => require(`assets/experiences/giftcard/${i}.png`));

const deporteExperience =  _range(1, 3).map(i => require(`assets/experiences/deporte/${i}.png`));

const productosExperience = _range(1, 2).map(i => require(`assets/experiences/productos/${i}.png`));

const diversionExperience = _range(1, 4).map(i => require(`assets/experiences/diversion/${i}.png`));

const bellezaExperience = _range(1, 3).map(i => require(`assets/experiences/belleza/${i}.png`)); 

const todasLasCosas = {
  gastronomiaExperience: gastronomiaExperience,
  giftcardExperience: giftcardExperience,
  deporteExperience: deporteExperience,
  productosExperience,  // this is the same as saying 'productosExperience: productosExperience'
  diversionExperience,
  bellezaExperience 
}

export default todasLasCosas

然后在您的目标模块中：

import todasLasCosas from './todasLasCosas.js'

请注意此导入语句中缺少花括号。导入默认导出（AKA 未命名导出）时，不需要大括号。然后在您的文件中，您可以访问如下内容：

todaslasCosas.gastronomiaExperience
todaslasCosas.bellezaExperience