如何在React上獲取動態引用

Question

我有這個參考元素

ref={`inner-player${this.props.position}`}

在一個函數中，我需要使用該引用來做這樣的事情

const chipBetImage = this.refs.inner-player${this.props.position};

但我收到一個錯誤

./app/components/ui/PlayerSlot/index.js
Module build failed: SyntaxError: /home/marcelo/Documents/Projects/application-playerinterface/app/components/ui/PlayerSlot/index.js: Unexpected token (150:50)
  148 |       this.props.addMoney({position : this.props.position, currentBet : this.props.currentBet});
  149 |     } else {
> 150 |       const chipBetImage = this.refs.inner-player${this.props.position};
      |                                                   ^
  151 |       chipBetImage.classList.add('animated', 'pulse');

那么，這樣做的方法是什么？

Answer 1

${}僅在模板文字內部有效。 this.refs.inner-player${this.props.position}; 不是模板文字。

如果要使用計算所得的屬性名稱，則必須使用括號符號：

this.refs[`inner-player${this.props.position}`]

請參見使用變量動態訪問對象屬性 。