循环遍历组件并在 switch case 中返回 (React.js)答案

【问题标题】：Loop through components and return in switch case (React.js)循环遍历组件并在 switch case 中返回 (React.js)
【发布时间】：2019-05-01 09:47:42
【问题描述】：

简要说明

感谢svg-to-react-cli 脚本，我的图标有 73 个组件。现在，如果我想调用这些图标，我可以单独调用我想使用的每一个。 但这不是我想要的。

我想要的是只调用 one 组件，在其中添加“名称”值。
例如：

我的问题

如何循环遍历目录中的多个组件，并将它们返回到 switch case 中？

这就是目录中所有 73 个组件的样子

import React from 'react';

export default function NAMEOFICON(props) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width={100} height={100} {...props}>
      ...CONTENT OF SVG...
    </svg>
  );
}

这就是我所拥有的

import React from 'react';
import ALLCOMPONENTS from 'DIRECTORY WITH COMPONENTS'

// HERE I WANT TO LOOP THROUGH COMPONENTS AND ADD THEM IN THIS SWITCH
const getPath = (name, props) => {
  switch (name) {
    case 'NAME OF THE COMPONENT':
      ... HERE COMES CONTENT OF COMPONENT...
    default:
      return <path />;
  }
};
// HERE I CREATE A CONST TO LATER CALL THE DESIRED COMPONENT BY NAME
const Icon = ({
  name = '',
  style = {},
  fill = 'currentColor',
  viewBox = '',
  width = '20px',
  className = 'icon icon' + name,
  height = '20px'
}) => (
    {NAME OF COMPONENT({ fill })}
);

export default Icon ;

【问题讨论】：

标签： reactjs loops switch-statement components case

【解决方案1】：

依赖客户端脚本中的目录内容是不正确的，因为捆绑的应用程序中没有。

正确的方法是拥有一个重新导出所有子模块的“桶”模块：

icon-components/index.js

export { default as FooIcon } from './foo-icon';
export { default as BarIcon } from './bar-icon';

并像这样使用它：

import * as icons from './icon-components';

...

for (const [iconComponentName, IconComponent] of Object.entries(icons)) { ... }

类似于生成图标组件的方式生成 index.js 是有意义的，即在可以访问文件系统的 Node.js 环境中。 svg-to-react-cli 可以为此目的分叉，或者这可以是一个单独的脚本。

【讨论】：

您好！我完全明白。然而;我想创建一个包。所以稍后，我只需要'npm install mypackage'，然后'import Icon from mypackage，然后我所要做的就是。我想要的最终结果；只需添加一个新的图标组件，而无需处理任何更多的手动工作。 + 用你的方法；我确实必须为每个图标手动导出写入每个导出，并且我尝试使其尽可能自动进行。
如前所述，您需要在 Node.js 脚本 中执行此操作以自动生成 index.js。您可以从头开始编写它或 fork svg-to-react-cli 并对其进行修改以生成 index.js 以及组件类。这超出了解决 React 部分的原始问题的范围。 React 部分的答案是，您需要以任何方式拥有此 index.js 文件，以使您的包为用户无缝工作。如果您在根据需要修改 svg-to-react-cli 时遇到特定问题，请考虑提出另一个纯粹针对 Node.js 的问题。
对于 Node.js 脚本，应该类似于 let indexContents = fs.readdirSync(__dirname + '/icon-components').map(file => { let filename = path.parse(file).name; return "export {default as " + convertKebabToPascalCase(filename) + "} from './" + filename + "'").join('\n'); fs.writeFileSync(__dirname + '/icon-components/index.js', indexContents)。
好的；感谢您的信息！我将尝试这个并将您的问题设置为已回答：因为这显然是做我想要实现的目标的正确方法。谢谢！
您好，很抱歉这么晚才回来。我有点坚持尝试按照你的答案。我已经完成了你对 React 部分所说的一切（让我们忘记 node.js 的事情，我会在稍后处理它）。所以在我的组件文件夹中，我有一个导出所有内容的 index.js。在我的 Icon.js 中，我从我的文件夹中导入 * 作为 Icons 并复制了你的 for 循环来测试它。现在，当我 console.log 'iconComponentName' 我得到它的名字；但对 IconComponent 执行相同操作会返回未定义。我可以返回组件的名称，但不能返回数据。我在这里忘记了什么？

【解决方案2】：

一个解决方案可能是......

有一个导出所有图标的索引文件。

export { SomeIcon } from './someIcon.jsx';
export { SomeOtherIcon } from './someOtherIcon.jsx';

将所有图标导入Icons

import * as Icons from 'icons';

您可以使用名称作为Icons 上的键来获取组件

const Icon = Icons[props.name];
return <Icon {...otherProps} />;

【讨论】：

这确实是estus也建议的解决方案