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

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

然而,什么都没有被呈现在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)=> ())}

给TA打赏
共{{data.count}}人
人已打赏
解决方案

如何连接两张表,而不至于空列被另一记录填满?

2022-4-21 22:00:15

解决方案

如何使用PHP读取feeds内联标签?

2022-4-22 0:00:15

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索