如何使用 React 动态显示每个类别的图标？

Question

我正在尝试为从 API 获取的每个类别设置不同的图标。但图标是我从本地电脑上获取的。 这可能不是最好的方法，您还有其他想法吗？ props.icon 为我提供了来自此 API URL 的 Object.keys： https://www.ifixit.com/api/2.0/categories

我尝试使用 switch 语句动态更改图像中的 src="" 但由于某些原因不起作用。

//This is how I import the images
import apparelIcon from '../../../assets/img/icons/apparel.png';
import macIcon from '../../../assets/img/icons/mac.png';
import carsIcon from '../../../assets/img/icons/cars.png';


//This is how I try to display it 
const Category = (props) => {
 let icon = null;
 switch (props.icon){ 
     case 'Apparel' : icon = apparelIcon;
     break;
     case 'Mac' : icon = macIcon;
     break;
     case 'Cars' : icon = carsIcon;
     break;   
}

 return (
  <div className={classes.Category}>
     <img src={icon}/>
     <h1>{props.name}</h1>
  </div>
 )
}

export default Category;

我根本没有得到任何图像

Answer 1

您可以在图标目录中创建index.js并导出图像：

export { default as ApparelIcon } from './apparel.png';
export { default as MacIcon } from './mac.png';
export { default as CarsIcon } from './cars.png';

然后在您的代码中，您可以将它们作为对象导入并通过动态键获取图像：

import * as icons from '../../../assets/img/icons/';

const Category = (props) => {
 const icon = icons[`${props.icon}Icon`];
 return (
  <div className={classes.Category}>
     <img src={icon}/>
     <h1>{props.name}</h1>
  </div>
 )
}

Answer 2

我认为你必须将逻辑放在使用 useEffect 的组件生命周期上。我想象这样的状态：

const Category = (props) => {
const [icon, setIcon] = useState(null);

useEffect(() => {
  const setIcon = () => {
     if(props.icon === 'Apparel'){
       setIcon({icon: Apparel})
    } /* rest of the logic */
} setIcon()
}, [props.icon]);

我不认为它一定有效，但是尝试一下很方便。

Answer 3

您可以使用另一个使用枚举的组件来选择适当的图标。

export default function Icon({iconName}){
    return (
        <span className="panel-icon">
            {
                {
                    apparel: <img src='../../../assets/img/icons/apparel.png'/>,
                    mac: <img src='../../../assets/img/icons/mac.png'/>,
                    cars: <img src='../../../assets/img/icons/cars.png'/>,
                }[iconName]
        }
        </span>
    );
}

然后在你想要的地方：

<Icon iconName={iconName}></Icon>