在组件中动态添加反应图标）到导航栏项目）答案

【问题标题】：Add react icon(s) dynamically to navbar item(s) in component在组件中动态添加反应图标）到导航栏项目）
【发布时间】：2022-01-18 14:49:30
【问题描述】：

请耐心等待，我正在学习 React，所以我是初学者。我正在尝试创建一个底部导航面板。我没有对每个导航栏元素进行硬编码，而是找到了将导航栏元素存储在数组中然后将其映射到导航栏的好例子。我已经完成了以下工作，除了我不确定如何在组件本身的 navTabs 数组中动态引用图标？我可以毫无问题地添加（例如）<FaIdCard />，但我不想硬编码，因为它会破坏从数组生成导航的意义。

import React from 'react';
import { Nav, NavItem} from 'reactstrap';
import { NavLink } from 'react-router-dom';
import { FaIdCard, FaInfoCircle } from "react-icons/fa";


/* This array will be mapped onto our nav elements */
const navTabs = [{
    route: "/about",
    icon: FaInfoCircle,
    label: "About"
},{
    route: "/customer",
    icon: FaIdCard,
    label: "Customer"      
}]

const Navigation = (props) => {
    return (
        <div>
            <nav className="navbar fixed-bottom navbar-light" role="navigation">
                <Nav className="w-100">
                    <div className="d-flex flex-row justify-content-around w-100">
                        { 
                        /*  index is a built-in part of .map that gives u index number. 
                            The grave accent (`) is used for template literals, or combining variables, javascript and text/html
                        */
                            navTabs.map((tab, index) =>(
                                <NavItem key={`tab-${index}`}> 
                                    <NavLink to={tab.route} className="nav-link" activeClassName="active">
                                        <div className="row d-flex flex-column justify-content-center align-items-center">
                                            <div>{tab.label}</div>
                                        </div>
                                    </NavLink>
                                </NavItem>
                            ))
                        }
                    </div>
                </Nav>
            </nav>
        </div>
    )
  };
  
  export default Navigation;

【问题讨论】：

标签： reactjs reactstrap react-icons

【解决方案1】：

尝试为您的icon 属性使用图标组件：

const navTabs = [{
    route: "/about",
    icon: <FaInfoCircle />,
    label: "About"
},{
    route: "/customer",
    icon: <FaIdCard />,
    label: "Customer"      
}]

然后像这样将它添加到NavItem：

<NavItem key={`tab-${index}`}>
  <NavLink to={tab.route} className='nav-link' activeClassName='active'>
    <div className='row d-flex flex-column justify-content-center align-items-center'>
      <div>
        {tab.icon} {tab.label}
      </div>
    </div>
  </NavLink>
</NavItem>;

【讨论】：

成功了，谢谢！