Question

所以我有一个像这样的jsx

<img
  onClick={(event) => this.handleImgClick(event)}
  id="typeLightBox"
  className={`${this.state.popupType === 'typeLightBox' ? 'selected' : ''}`}
  src="url"
/>

在className定义中我想知道是否有任何方法可以获取此特定img的id而不是手动编写id？

Answer 1

最简单的解决方案可能就是将它放在一个变量中：

const id = "typeLightBox";
return <img
  onClick={(event) => this.handleImgClick(event)}
  id={id}
  className={`${this.state.popupType === id ? 'selected' : ''}`}
  src="url"
/>

Answer 2

您可以使用裁判

`<img
 onClick={(event) => this.handleImgClick(event)}
 id="typeLightBox"
 ref={(a) => {this.image = a}}
 className={`${this.state.popupType === this.image.id ? 'selected' : ''}`}
 src="url"
/>`

但您应避免使用裁判

React在JSX中获取特定元素

2 个答案: