Javascript 从React中的相同元素方法获取属性值

假设我有一个如下所示的React组件渲染：

return (
  <nav>
    <a href='/link1'>LINK 1</a>
    <a href='/link2'>LINK 2</a>
    <a href='/link3'>LINK 3</a>
  </nav>
)

<a href='/link1' class='baz'>LINK 1</a>
<a href='/link2' class='bar'>LINK 2</a>
<a href='/link3' class='baz'>LINK 3</a>

返回(
)

是否可以从元素中调用的方法中引用唯一的href属性，类似于以下内容（不起作用的伪代码）：

。。。
常量func1=函数（目标）{
如果（target.href=='/link2'）返回“bar”
返回“baz”
}
返回(
)
...

理想情况下，上面的示例将在DOM中呈现如下内容：

return (
  <nav>
    <a href='/link1'>LINK 1</a>
    <a href='/link2'>LINK 2</a>
    <a href='/link3'>LINK 3</a>
  </nav>
)

<a href='/link1' class='baz'>LINK 1</a>
<a href='/link2' class='bar'>LINK 2</a>
<a href='/link3' class='baz'>LINK 3</a>

我想这样做以保持它干燥——避免需要写两次href值（实际上这比简单的“/link1”要长得多）

---

我仍然在学习React，所以如果答案是“否”，或者“您可以这样做，但这不是一个好的做法”，我很想知道。非常感谢。

您可以创建链接组件，并将getter函数传递给它

function Link(props) {
  return <a href={props.href} className={props.getClassName(props.href)} />
}

功能链接（道具）{
返回
}

或者，您可以创建链接数组，并渲染它们

const links = ['link1', 'link2', 'link3']

return (
  <nav>
    {links.map(link => <a href={link} className={getClassName(link)} />}
  </nav>
)

constlinks=['link1'，'link2'，'link3']
返回(
{links.map（link=>}
)

您可以创建链接组件，并将getter函数传递给它

function Link(props) {
  return <a href={props.href} className={props.getClassName(props.href)} />
}

功能链接（道具）{
返回
}

或者，您可以创建链接数组，并渲染它们

const links = ['link1', 'link2', 'link3']

return (
  <nav>
    {links.map(link => <a href={link} className={getClassName(link)} />}
  </nav>
)

constlinks=['link1'，'link2'，'link3']
返回(
{links.map（link=>}
)

您可以存储链接信息并对其进行迭代：

const links = [{href: "/link1", text: "LINK 1"}, {href: "/link2", text: "LINK 2", className: "bar"}, {href: "/link3", text: "LINK 3"}]


return (
  <nav>
    {links.map(({href, text, className}) => (<a href={href} className={className || "baz"}>{text}</a>))}
  </nav>
)

constlinks=[{href:/link1]，text:“link1”}，{href:/link2”，text:“link2”，className:“bar”}，{href:/link3”，text:“link3”}]
返回(
{links.map（（{href，text，className}）=>（））}
)

您可以存储链接信息并对其进行迭代：

const links = [{href: "/link1", text: "LINK 1"}, {href: "/link2", text: "LINK 2", className: "bar"}, {href: "/link3", text: "LINK 3"}]


return (
  <nav>
    {links.map(({href, text, className}) => (<a href={href} className={className || "baz"}>{text}</a>))}
  </nav>
)

constlinks=[{href:/link1]，text:“link1”}，{href:/link2”，text:“link2”，className:“bar”}，{href:/link3”，text:“link3”}]
返回(
{links.map（（{href，text，className}）=>（））}
)

这两个建议都很好-谢谢！我会让问题再开放一段时间，假设没有更好的答案，请将您的答案标记为“一”。再次感谢。这两个建议都很好-谢谢！我会让问题再开放一段时间，假设没有更好的答案，请将您的答案标记为“一”。再次感谢。