将图标图像绑定到各自的名称上，然后进行渲染。

Posted 2021-03-19

我有一个设施数组，我试图将每个设施与其各自的图标映射在一起，然后再渲染。

然而，什么都没有被呈现在div与类 hotel_card_flame_content_container_middle_container_amenities但它是空的，而不是做循环，也没有输出错误。

如果您有任何关于我应该如何处理这个问题的想法，我将不胜感激。

所有组件代码 https:/codepen.iobihirepenabvBeqK。

我的功能

import wifiIcon from '../../assets/icons/icons8-wi-fi-48.png'
import coffeeIcon from '../../assets/icons/icons8-cafe-50.png'
import AirCondIcon from '../../assets/icons/icons8-air-conditioner-64.png'
import defaultIcon from '../../assets/icons/button-circle-add-512.png'

const iconWithAmenities = [];

function AddIcon(aminityArray) {
    aminityArray.forEach(name=>{

        getIcon(name.toLowerCase());
        function getIcon(a) {
            var lookUpAmenities = {
                'free wifi': function () {
                    return iconWithAmenities.push({ name: name, icon: wifiIcon });
                },
                'free breakfast': function () {
                    return iconWithAmenities.push({ name: name, icon: coffeeIcon });
                },
                'air conditioning': function () {
                    return iconWithAmenities.push({ name: name, icon: AirCondIcon });
                },
                'default': function () {
                    return iconWithAmenities.push({ name: name, icon: defaultIcon });
                }
            };
            return (lookUpAmenities[a] || lookUpAmenities['default'])();
        }

    })
    return iconWithAmenities;
}

allAmenities数组是这样的 const allAmenities = ["Free wifi", "free breakfast", "free tv"]

反应渲染

<div className="hotel_card_flame_content_container_middle_container_amenities">
   {(AddIcon(allAmenities)).map((amenity, index)=> {
      <div key={index}>
        <div className="hotel_card_flame_content_container_middle_container_amenities_container">
          <div className="hotel_card_flame_content_container_middle_container_amenities_container_first">
            <div className="hotel_card_flame_content_container_middle_container_amenities_container_first_image">
             <img className="hoteCard_icon" src={amenity.icon} />
            </div>
            <div className="hotel_card_flame_content_container_middle_container_amenities_container_first_text">
                {amenity.name}
            </div>

          </div>
         </div>
       </div>
     })}
 </div>


  [1]: https://codepen.io/bihire/pen/abvBeqK

答案

基本上，它是在回调函数上的括号地图

不得不改

 {(AddIcon(allAmenities)).map((amenity, index)=> {})}

对此

 {(AddIcon(allAmenities)).map((amenity, index)=> ())}