Question

我试图为从API获取的每个类别设置不同的图标。但是图标是从本地PC获得的。这可能不是最好的方法，您还有其他想法吗？ 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

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

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

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

我不认为它必须起作用，但是方便尝试。

Answer 2

您可以在图标目录中创建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 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>

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

3 个答案: