如何從reactjs中的JSON數據中獲取字體真棒圖標？

Question

我有一個json數據數組。 我使用axios從API提取數據，並且希望使用其他json數據進行映射。 一切都正常進行。 但字體真棒圖標無法獲取。 在其內部，它在前端UI（例如Spa）中獲取純代碼。 這就是我嘗試過的。 請扔我的代碼。

我嘗試了幾種通過使用，等添加字體真棒圖標的方法。我嘗試了此處建議的許多解決方案，但是我無法獲得其中的任何一種來生成圖標。

-----------------------------------------------------------------------
  {amenitiesdata.map((amenities, index) => (
                                <div key={index} className="col-lg-4 col-md-4">
                                    <p>{amenitiesUiMap[amenities].img + '' + amenitiesUiMap[amenities].name}</p>
                                </div>
                            ))}
------------------------------------------------------------------------------------

碼：

import React, { Component } from 'react';
import './src/../../assets/css/homenavbarwithsearch.css';
import '../../node_modules/font-awesome/css/font-awesome.min.css';
import NavBar from './navbar';
import Example from '../Components/datepicker';
import axios from 'axios';
import '../scripts/api';

class HomeNavBarwithSearch extends Component {
    constructor(props) {
        super(props);
        this.state = {
            propertyname: [],
            buildingtype: [],
            amenitiesdata: [],
            uiRoomType: {
                "SingleBedRoom": "Single Bed Room",
                "DoubleBedRoom": "Double Bed Room",
                "OneBHKApartment": "One BHK Apartment",
                "TwoBHKApartment": "Two BHK Apartment",
                "ThreeBHKApartment": "Three BHK Apartment",
            },

            amenitiesUiMap: {
                "AirConditioning": {
                    "img": "<i className=\"fas fa-snowflake\"></i>",
                    "name": "Air Conditioning"
                },
                "AirportTransfer": {
                    "img": "<i className=\"fa fa-plane\" aria-hidden=\"true\"></i>",
                    "name": "Airport Transfer"
                },
                "Balcony": {
                    "img": "<i className=\"fas fa-dungeon\"></i>",
                    "name": "Balcony"
                },
                "Bathtub": {
                    "img": "<i className=\"fa fa-bath\" aria-hidden=\"true\"></i>",
                    "name": "Bathtub"
                },
                "BusinessFriendly": {
                    "img": "<i className=\"fa fa-handshake-o\" aria-hidden=\"true\"></i>",
                    "name": "Business Friendly"
                },
                "CarPark": {
                    "img": "<i className=\"fa fa-car\" aria-hidden=\"true\"></i>",
                    "name": "Car Park"
                },
                "CoffeeMaker": {
                    "img": "<i className=\"fa fa-coffee\" aria-hidden=\"true\"></i>",
                    "name": "Coffee Maker"
                },
                "DisableFriendly": {
                    "img": "<i className=\"fas fa-wheelchair\"></i>",
                    "name": "Disable Friendly"
                },
                "FrontDesk": {
                    "img": "<i className=\"fa fa-desktop\" aria-hidden=\"true\"></i>",
                    "name": "Front Desk"
                },
                "FullyFurnished": {
                    "img": "<i className=\"fas fa-couch\"></i>",
                    "name": "Fully Furnished"
                },
                "Gym": {
                    "img": "<i className=\"fas fa-dumbbell\"></i>",
                    "name": "Gym"
                },
                "Heating": {
                    "img": "<i className=\"fas fa-water\"></i>",
                    "name": "Heater"
                },
                "Internet": {
                    "img": "<i className=\"fa fa-wifi\" aria-hidden=\"true\"></i>",
                    "name": "WiFi"
                },
                "Kitchen": {
                    "img": "<i className=\"fas fa-utensils\"></i>",
                    "name": "Kitchen"
                },
                "Nightclub": {
                    "img": "<i className=\"fas fa-glass-cheers\"></i>",
                    "name": "Nightclub"
                },
                "NonSmoking": {
                    "img": "<i className=\"fas fa-smoking-ban\"></i>",
                    "name": "Non Smoking"
                },
                "PetsAllowed": {
                    "img": "<i className=\"fas fa-dog\"></i>",
                    "name": "Pets Allowed"
                },
                "PrivatePool": {
                    "img": "<i className=\"fas fa-swimming-pool\"></i>",
                    "name": "Private Pool"
                },
                "Refrigerator": {
                    "img": "<i className=\"fas fa-door-closed\"></i>",
                    "name": "Refrigerator"
                },
                "Restaurant": {
                    "img": "<i className=\"fas fa-bread-slice\"></i>",
                    "name": "Restaurant"
                },
                "Sauna": {
                    "img": "<i className=\"fas fa-hot-tub\"></i>",
                    "name": "Sauna"
                },
                "SemiFurnished": {
                    "img": "<i className=\"fas fa-chair\"></i>",
                    "name": "Semi Furnished"
                },
                "Smoking": {
                    "img": "<i className=\"fas fa-smoking\"></i>",
                    "name": "Smoking"
                },
                "SmokingArea": {
                    "img": "<i className=\"fas fa-smoking\"></i>",
                    "name": "Smoking Area"
                },
                "Spa": {
                    "img": "<i className=\"fas fa-spa\"></i>",
                    "name": "Spa"
                },
                "SwimmingPool": {
                    "img": "<i className=\"fas fa-swimmer\"></i>",
                    "name": "Swimming Pool"
                },
                "TV": {
                    "img": "<i className=\"fa fa-television\" aria-hidden=\"true\"></i>",
                    "name": "TV"
                },
                "Terrace": {
                    "img": "<i className=\"fas fa-dungeon\"></i>",
                    "name": "Terrace"
                },
                "WashingMachine": {
                    "img": "<i className=\"fas fa-dumpster\"></i>",
                    "name": "Washing Machine"
                }
            }
        }
    }


    componentDidMount() {
        axios.all([
            axios.get(`/facility`),
            axios.get(`/meta/roomtypes?buildingtype=Hotel`),
            axios.get(`/facility`)
        ])
            .then(axios.spread((propertyname, buildingtype, amenitiesdata) => {
                console.log(propertyname.data[0].name, buildingtype.data);
                this.setState({
                    propertyname: propertyname.data[0].name,
                    buildingtype: buildingtype.data,
                    amenitiesdata: amenitiesdata.data[0].amenities
                });
            }))
            .catch(error => console.log(error));
    }



    render() {
        const { propertyname, buildingtype, amenitiesdata, uiRoomType, amenitiesUiMap } = this.state;
        return (
            <div className="jumbotron-fluid">
                <div className="container-fluid">
                    <NavBar />
                </div>
                <div className="container-fluid" style={{ paddingBottom: '40px', paddingTop: '60px' }}>

                    <div className="center">
                        <span style={{ fontSize: '18px' }}>Hotel</span>
                        <div className="form-inline" id="form" action="">
                            <button type="" id="propertyname">{propertyname}</button>
                            <select name="roomtype" id="roomType" placeholder="Room Type">
                                {buildingtype.map((roomtype, index) => (
                                    <option key={index} value={roomtype}>{uiRoomType[roomtype]}</option>
                                ))}
                            </select>
                            <Example />
                            <select name="adults" id="" placeholder="Adults">
                                <option value="1adult">1 adult</option>
                                <option value="2adults">2 adults</option>
                                <option value="3adults">3 adults</option>
                                <option value="4 adults">4 adults</option>
                            </select>
                            <button id="search" type="submit">Search</button>
                        </div>
                        <div className="row">
                            {amenitiesdata.map((amenities, index) => (
                                <div key={index} className="col-lg-4 col-md-4">
                                    <p>{amenitiesUiMap[amenities].img + '' + amenitiesUiMap[amenities].name}</p>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        );
    }

}


export default HomeNavBarwithSearch;

i want to show font amenities icon and name. but getting code like this UI

"<i className="fa fa-plane" aria-hidden="true"></i>Airport Transfer"

Answer 1

您可以更改API以返回類名而不是整個圖標，然后使用該名稱，也可以在跨度上使用“ dangerouslySetInnerHtml”，這將在跨度內呈現圖標。

<span dangerouslySetInnerHTML={{ __html: amenitiesUiMap[amenities].img }} />;

我建議第一種方法。

Answer 2

而是將圖標作為字符串用作jsx

 "AirConditioning": {
                    "img": <i className="fas fa-snowflake"></i>,
                    "name": "Air Conditioning"
                }

這樣就可以了