将反应图标动态添加到组件中的导航栏项目

Question

请耐心等待，我正在学习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;

Answer 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>;