javascript - 我有六个 react 文件，每个文件导出一个数组，我想将六个文件减少到一个

Question

我有 6 个如下所示的文件，我想将这六个文件减少为一个名为“providers”的文件，然后我可以将每个数组导入到其他文件中。

这是我的六个文件

gastronomia.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`));

diversion.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`));

贝勒扎.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中，例如如下所示:

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};

我不知道我做错了什么，但是当我尝试映射另一个组件中的数组时，它给了我一个错误

类型错误:popoverCategory.map 不是函数

当我将每个文件都放在自己的文件中时，效果很好

我的文件结构是

源代码

 assets
  clientes
    clientes images
  experiences
     experiences 6 images 
     file belleza
      1.png
      2.png
     file deporte
      1.png
      2.png
     file gastronomia
        ]1.png
        2.png
        3.png
        4.png
      rest of experience files with images

components
  Experiences.jsx
  Other components are in here
data
  clientes.jsx
  providers.jsx
  this is where I use to have all the data files(gastronomia.jsx deporte.jsx ect)
pages
  Home.jsx
root
  App.jsx
  Providers.jsx
  strore.jsx
  theme.jsx
utils
  ga.jsx
  enviroment.jsx

Answer 1

您需要像这样导出它们:

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

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

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

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

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

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

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

然后像这样导入它:

import { bellezaExperience } from '../Your_File_Path';

希望这对您有用。