尝试将 Font-Awesome 图标添加到我的导航栏中的选项卡

Question

I'm new to React and I am trying to add Font-awesome icons to my second navigation bar. I iterated through each of the elements with switch-case statements but upon adding the icons they all appeared to be the same showing that only the default case was working. How do I correct this?

/* eslint-disable default-case */
/* eslint-disable no-fallthrough */
/* eslint-disable no-unused-vars */
/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Component } from 'react';

class NewCounter extends Component {
    state={
        count:0,
        tabs:["Home","About Us","Contact Us","FAQ","News"],
        things:["Home","About","Portfolio","Services","Contact"]
    };
    formatCount = () => {
        const count = this.state.count;
        return count === 0 ? "Zero" : count;
    };

    renderTags=()=>{
        let navlink="nav-item nav-link";
        return (
        <nav className="nav nav-tabs">
            {this.state.tabs.map(tab=><a href="#" key={tab} className="nav-item nav-link">{tab}</a>)}
        </nav>);
    }

    anjieNav=()=>{
        let navlink="nav-item nav-link";

        return (
        <div>
            <nav className="nav nav-tabs">
                {this.state.things.map(thing=><a href="#" key={thing} className={this.changeClass()}><i className={this.fontClass()}></i>{thing}</a>)}
            </nav>

        </div>
            
        
        );
        
    }

    changeClass=()=>{
        let classes="nav-item nav-link mr-2";
        return classes
    }

    fontClass=()=>{
        let x;
        //x.className="fas fa-home";
        //x.innerHTML="Buy";
        //x.className="fas fa-ad mr-2";
        let classes="fas fa-";
        //console.log(this.state.things[1]);
        console.log(x);
        switch (this.state.things[x]){
            case 0:
                classes+="home mr-2";
            case 1:
                classes+="ad mr-2";
            case 2:
                classes+="globe mr-2";
            case 3:
                classes+="wrench mr-2";
            case 4:
                classes+="home mr-2";
            default:
                classes+="home mr-2";
        }
        /*var menus = document.getElementsByClassName("nav-item nav-link");
        for (var i = menus.length - 1; i >= 0; i--) {
             menus[i].className = "fas fa-home mr-2";
        }*/
        /*if (this.state.things==="Home")
            classes+="home mr-2";
        else if (this.state.things==="About")
            classes+="ad mr-2";
        else if (this.state.things[2])
            classes+="globe mr-2";
        else if (this.state.things[3])
            classes+="wrench mr-2";
        else if (this.state.things[4])
            classes+="home mr-2";
        else if (this.state.things[5])
            classes+="home mr-2";*/ 
        return classes;
    }

    modify=()=>{
        let first=document.getElementsByClassName('nav-item nav-link').item(0);
    }

    myCarousel=()=>{
        return(
        <div id="carouselExampleFade" className="carousel slide carousel-fade" data-ride="carousel">
                    <ul class="carousel-indicators">
                        <li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleFade" data-slide-to="1"></li>
                        <li data-target="#carouselExampleFade" data-slide-to="2"></li>
                    </ul>
                    <div className="carousel-inner">
                        <div className="carousel-item active">
                            <img src="ny.jpg" className="d-block w-100"   alt="..."/>
                            <div className="carousel-caption">
                                <h3>My First Image</h3>
                                <p>This is my first image!</p>
                            </div>
                        </div>
                        <div className="carousel-item">
                            <img src="la.jpg" className="d-block w-100" alt="..."/>
                            <div className="carousel-caption">
                                <h3>My Second Image</h3>
                                <p>This is my second image!</p>
                            </div>
                        </div>
                        <div className="carousel-item">
                            <img src="chicago.jpg" className="d-block w-100"  alt="..."/>
                            <div className="carousel-caption">
                                <h3>My Third Image</h3>
                                <p>This is my third image!</p>
                            </div>
                        </div>
                    </div>
                    <a className="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
                        <span className="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span className="sr-only">Previous</span>
                    </a>
                    <a className="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
                        <span className="carousel-control-next-icon" aria-hidden="true"></span>
                        <span className="sr-only">Next</span>
                    </a>
                </div>);

    }

    styles={
        fontSize:15,
        fontWeight:"bold"
    };
    render() { 
        return (
            <div>
                <span style={this.styles} className={this.formatBadge()}>
                    {this.formatCount()}
                </span>
                <button className="btn btn-secondary m-2">Increment</button>

                {this.renderTags()}
                {this.anjieNav()}
                
                {this.myCarousel()}
                {this.modify()}
                
                
                
            
            </div>

            



            );
    }

    formatBadge=()=>{
        let classes="badge m-2 badge-";
        classes+=this.state.count===0?"warning":"danger";
        return classes;
    }
}
 
export default NewCounter;

I already added font-awesome to my modules. I just don't know how to access the elements.

Answer 1

@Chris G 在评论中提供的答案：这是示例代码： https ://codesandbox.io/s/winter-meadow-ebgov?file=/src/NewCounter.js