我如何才能高亮显示活动导航栏段落

Question

有反应组件-导航栏：

import React from 'react';
function Navbar(props) {
return (
<nav className="navbar">
<a data-id="first" href="/">/</a>
<a data-id="second" href="/link">/link</a>
</nav>
);
}
export default Navbar;

<Navbar active="second" />

根据props.active，如何选择活动元素？

在普通的js中，我会创建一个链接对象，并使用循环生成导航栏：

const objOfLinks = {
"1": {
text: "some text",
href: "/"
},
"2": {
text: "some text",
href: "/link"
}
}
function nav(obj, active = "1") {
let nav = document.createElement('nav');
for (item in obj) {
const a = document.createElement('a');
a.textContent = obj[item].text;
a.href = obj[item].href;
if (item == active) {
a.style.color = 'red';
}
nav.appendChild(a);
}
return nav;
}
document.querySelector('div').appendChild(nav(objOfLinks, 2));

<div></div>

Answer 1

这个简单的答案应该会给您一个想法，也可以使用带有链接数组的map。

const linkArr = [
{
text: "some text",
href: "/"
},
{
text: "some text",
href: "/link"
}
]
function Navbar({active}) {
const activeStyle = {color:"red"}
return (
<nav className="navbar">
{linkArr.map((link,i) =>(
<a href={link.href} style={active === i ? activeStyle : {}}>{link.text}</a>
))}
</nav>
);
}
ReactDOM.render(
<Navbar active={1} />,
document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

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

以下是演示：https://codesandbox.io/s/bitter-forest-5edu1?file=/src/App.js:51-428