Question

简要说明

因此，借助svg-to-react-cli脚本，我的图标有了73个组件。现在，如果要调用这些图标，则可以分别调用要使用的每个图标。 但这不是我想要的。

我想要的是仅调用添加了“名称”值的一个组件。
例如： <图标名称='我要调用的73个组件之一的名称'/>

我的问题

如何遍历目录中的多个组件，并在开关盒中返回它们？

这是目录中我所有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 ;

Answer 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可以用于此目的，也可以是单独的脚本。

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

遍历组件并返回切换案例（React.js）

简要说明

我的问题

这就是我所拥有的

2 个答案: