如何根据 React 中的名称道具渲染一个数组项

Question

简要说明

感谢之前的帮助，我能够在我的 React 项目中呈现多个图标组件。除了我不想让它们一次全部呈现，而只是我基于名称道具调用的那个。

对于必须在哪里传递道具以实现我想要的东西，我有点困惑。如标题“我尝试过的内容”中所示，我尝试使用“开关/案例”，但我不知道如何循环多个案例。

我有什么

App.js

import React, { Component } from 'react';
import './App.css';
import Icon from  './library/icons/Icon';
class App extends Component {
    render() {
        return (
               <div className='App'>
                   <Icon iconName='Icon1' />
                </div>
        );
    }
}
export default App;

图标.js

import React from 'react';
import * as icons from './icons' 

function IconList({iconName}) {

    const GetIcons = [];
    for (const [name, icon] of Object.entries(icons)) {
        GetIcons.push({name, icon})
    }
    const MapIcons = GetIcons.map(({name, icon}) => {
        return (
            <div>{name} {icon()}</div>
        )
    });
    console.log(GetIcons)
    return (
        <div>{MapIcons}</div>
    )
}
const Icon = ({iconName}) => (
    <IconList />
);

export default Icon;

这是做什么的

这会呈现我导入的 所有 SVG 图标组件。我的 MapIcons 箭头函数循环并呈现组件的名称以及呈现 svg 图标的函数。

我想要达到的目标

• 根据iconName prop只调用一个图标（如App.js所示）
• 有一个我传递给我的图标的道具列表，例如 'fill='currentColor'。

我尝试了什么

我尝试在 Switch 内部循环，以便将每个函数作为案例。但我已经不知道如何将道具传递给函数。

function IconList({}) {

    const GetIcons = [];
    for (const [name, icon] of Object.entries(icons)) {
        GetIcons.push({name, icon})
    }
    const SwitchIcons = (iconName, props) => {
        switch (iconName) {
            const MapIcons = GetIcons.map(({name, icon}) => {
                case {name}:
                    return (
                        {icon()}
                    )
            });
        }
    )
}

const Icon = ({
  iconName = '',
  stroke = 'currentColor',
  strokeLinecap = 'round',
  strokeLinejoin = 'round',
  strokeWidth = '3px',
  fill = 'currentColor',
  viewBox = '0 0 100 100',
  width = '100px',
  className = 'icon icon' + name,
  height = '100px'
}) => (
  <div className={className}>
   {SwitchIcons(iconName, { stroke })}
  </div>
);

export default Icon;

Answer 1

for 语句在this answer 中列出仅用于示例如何迭代图标条目，无需将项目推送到另一个数组，因为Object.entries 已经返回一个数组。 switch 语句只有在有明确的条件要列出时才需要。

const Icon = (/*...*/) => {
  const IconComponent = icons[iconName];
  <div className={className}>
   {IconComponent && <IconComponent stroke={stroke} />}
  </div>
};

export default Icon;

假设 icons 对象包含组件映射，则不需要 IconList、GetIcons 和 SwitchIcons。