在this.refs中使用函数参数

Question

我意识到它可能甚至不是React问题而且只是我让初学者感到困惑，但无论如何我都会在这里提问，因为我觉得我不理解某些事情。 / p>

我想创建一个播放声音onClick事件的函数，该函数可以重复使用。

我们说我在渲染中有2个音频标签：

<audio ref="jammed" src={jammedSound}></audio>
<audio ref="budge" src={budgeSound}></audio>

并且函数本身如下所示：

playSound(soundName){
  this.refs.soundName.play();
}

当我通过playSound('jammed')或playSound('budge')时它刚刚工作，我试图将它变成绝望的字符串，我在soundName上使用了大括号和括号，没有。我知道这可能是JS问题我不理解，我会感激帮助

Answer 1

正确的语法是

this.refs[soundName].play()

虽然不确定React。

更多信息：https://www.w3schools.com/js/js_properties.asp

Answer 2

请注意using string literals as refs is deprecated。

相反，请使用功能参考：

<audio ref={(el) => this.jammedRef = el} src={jammedSound}></audio>
<audio ref={(el) => this.budgeRef = el} src={budgeSound}></audio>

并且函数本身如下所示：

playSound(soundName){
  this[`${soundName}Ref`].play();
}