时间戳

首页 > 解决方案 > 从 React 中的相同元素方法获取属性值

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

问题描述

假设我有一个这样的 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，所以如果答案是“不”，或者“你可以做到，但它不是一个好习惯”，我很想知道。非常感谢。

标签： javascriptreactjs

解决方案

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

推荐阅读