如何在React.js中根据产品类别创建动态导航条

Question

我有一个导航栏，它有三个链接:女人，男人，孩子。

见图片。使用的导航图片

这三个类别来自于一个api。我目前硬编码的链接，如:

<nav>
<ul className={style.navContainer}>
<li className={style.navContainer__list}>
<a
className={`${style.navContainer__list__item} ${style.is_active}`}
href="#"
>
Women
</a>
</li>
<li className={style.navContainer__list}>
<a className={style.navContainer__list__item} href="#">
Men
</a>
</li>
<li className={style.navContainer__list}>
<a className={style.navContainer__list__item} href="#">
Kids
</a>
</li>
</ul>
</nav>

但是将来可能会有更多的类别，然后我必须再次硬编码新的类别。而不是这样做，我如何动态渲染我的导航?

Answer 1

data.map((item)=>(<li className={item.class}>
<a className={item.item.class} href={item.url}>
Kids
</a>
</li>))