React中如何在render内获取元素ID并传递给函数？

这个问题我碰到过，其实核心原因是你搞混了this的指向——箭头函数里的this指向的是React组件实例，而不是<a>标签元素，所以this.id自然拿不到值。下面给你几个靠谱的解决办法：

方法1：通过事件对象获取元素ID #

这是最直接的方式，利用点击事件的currentTarget（绑定事件的元素，也就是你的<a>标签）来获取ID：

<li><a id="profile" ref="profile" onClick={(e) => this.handleClickOnLink(e.currentTarget.id)}>Profile</a></li>

这里推荐用currentTarget而不是target，因为如果<a>标签里有子元素（比如图标），target可能会指向子元素，而currentTarget始终指向绑定事件的那个<a>标签，更可靠。

方法2：将ID作为组件属性传递（适合批量渲染场景） #

如果你是循环渲染多个这类链接，完全可以把ID存到数据源里，渲染时直接传递，避免硬编码：

// 假设组件里有一个链接列表数据
links = [
  { id: 'profile', text: 'Profile' },
  { id: 'settings', text: 'Settings' }
]

// render里循环渲染
render() {
  return (
    <ul>
      {this.links.map(link => (
        <li key={link.id}>
          <a id={link.id} onClick={() => this.handleClickOnLink(link.id)}>{link.text}</a>
        </li>
      ))}
    </ul>
  )
}

这种方式既避免了硬编码，也让代码更易维护，新增链接只需要在数据源里加一条就行。

方法3：利用Ref获取元素ID（不推荐，不如事件对象直接） #

如果你一定要用ref来获取，也可以，但需要注意字符串ref已经是React的过时写法，推荐用回调ref：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.profileRef = React.createRef();
  }

  handleClickOnLink = () => {
    const id = this.profileRef.current.id;
    // 处理逻辑
  }

  render() {
    return (
      <li><a id="profile" ref={this.profileRef} onClick={this.handleClickOnLink}>Profile</a></li>
    )
  }
}

不过这种方式只适合单个元素的场景，多个元素的话需要维护多个ref，不如前两种方法灵活。

内容的提问来源于stack exchange，提问作者Hamed Minaee