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

Question

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

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

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

...
const func1 = function(target){
if (target.href === '/link2') return 'bar'
return 'baz'
}
return (
<nav>
<a href='/link1' className={func1(this)}>LINK 1</a>
<a href='/link2' className={func1(this)}>LINK 2</a>
<a href='/link3' className={func1(this)}>LINK 3</a>
</nav>
)
...

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

<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，所以如果答案是"；否"；，或"；你可以这样做，但这不是一个好的做法"；，我很想知道。非常感谢。

Answer 1

您可以创建链接组件，并将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>
)

Answer 2

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

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>
)