如何在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;

Icon.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属性调用一个图标（如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。