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

Posted 2023-02-21

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

【英文标题】：Trying to add Font-Awesome Icons to the tabs in my Navigation Bar

【发布时间】：2021-09-18 17:01:39

【问题描述】：

我是 React 新手，我正在尝试将 Font-awesome 图标添加到我的第二个导航栏。我用 switch-case 语句遍历了每个元素，但是在添加图标后，它们似乎都是相同的，表明只有默认情况有效。我该如何纠正这个问题？

/* 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"   />
                            <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" />
                            <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"  />
                            <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;

我已经在我的模块中添加了 font-awesome。我只是不知道如何访问这些元素。

【问题讨论】：

x 始终为 undefined。即使不是，this.state.things[x] 也不匹配数字，它是一串文本。

@ChrisG 好吧，我还能如何遍历元素？

示例代码：codesandbox.io/s/winter-meadow-ebgov?file=/src/NewCounter.js

非常感谢

【参考方案1】：

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