React 在 JSX 中获取特定元素

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

you can use refs

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

but you should avoid using refs

React 在 JSX 中获取特定元素

React get specific element in JSX

javascript

reactjs

ecmascript-6

react-jsx