Javascript 如何高亮显示活动导航栏段落

有一个反应组件-导航栏：

从“React”导入React；
功能导航栏（道具）{
返回(
);
}
导出默认导航栏；

根据

props.active

，如何选择活动元素

在纯js中，我将创建链接对象，并使用循环生成导航栏：

const objOfLinks={
"1": {
文本：“一些文本”，
href:“/”
},
"2": {
文本：“一些文本”，
href:“/link”
}
}
功能导航（obj，active=“1”）{
让nav=document.createElement（'nav'）；
用于（obj中的项目）{
常量a=document.createElement（'a'）；
a、 textContent=obj[item].text；
a、 href=obj[item].href；
如果（项目==活动）{
a、 style.color='red'；
}
资产负债表（a）；
}
返回导航；
}
document.querySelector（'div'）.appendChild（nav（objOfLinks，2））
您可以简单地根据以下道具添加类：

function Navbar(props) {
  return (
    <nav className="navbar">
      <a
        data-id="first"
        className={props.active === "first" ? "active" : ""}
        href="/"
      >
        First
      </a>
      <a
        data-id="second"
        className={props.active === "second" ? "active" : ""}
        href="/link"
      >
        Second
      </a>
    </nav>
  );
}


功能导航栏（道具）{
返回(
);
}

这是一个演示：
这个简单的答案应该会给你一个想法，也可以使用带有一系列链接的
map


const linkArr=[
{
文本：“一些文本”，
href:“/”
},
{
文本：“一些文本”，
href:“/link”
}
]
函数导航栏（{active}）{
常量activeStyle={color:“red”}
返回(
{linkArr.map（（link，i）=>(
))}
);
}
ReactDOM.render(
,
document.getElementById（“react”）
);
使用您在示例中提到的
map
是一种更好的方法，请再次检查我的答案。