为什么使用 'key' 作为对象的键导致调用 object.key 到 return 为空？

Question

我最近为免费代码营做了一个项目，涉及用 React 制作鼓机。我创建了一个包含多个键的对象数组：'value' 对，其中包含要在整个应用程序中使用的数据。

数组如下所示：

const sounds = [
  {
    key: 'Q',
    id: 'heater-1',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
  }, {
    key: 'W',
    id: 'heater-2',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
  }, {
    key: 'E',
    id: 'heater-3',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
  }];

进一步进入代码，按钮使用函数播放与 <audio> 元素链接的声音：

playSound(e) {
    const sound = document.getElementById(this.props.key);
    sound.currentTime = 0;
    sound.play();
  }

this.props.key 与值 arr[i].key 相关联。单击按钮时，抛出错误，提示 const sound = document.getElementById(this.props.key); 的值为 null。

当我将对象键“key”更改为“keyTrigger”以便在 this.props.keyTrigger 上调用的代码与值 arr[i].keyTrigger 相关联时，问题已解决且值正确调用以便按钮按预期工作。

我只是想更好地理解为什么使用这个词的这种简单变化会造成如此大的差异。据我了解，Object.key 不是一种方法（如果我错了请纠正我）；字面上使用 'key' 这个词作为密钥的名称是这里的问题吗？

非常感谢任何帮助！

Answer 1

key 不是典型的道具，仅用于帮助 React handle lists correctly.

为了阻止人们将密钥用于其他目的，它在组件本身中不可用。

如果您只想传递一个“密钥”，那么只需为该道具使用另一个名称即可。

为什么使用 'key' 作为对象的键导致调用 object.key 到 return 为空？

Why does using 'key' as an object's key cause calling on object.key to return as null?

html

javascript

syntax

object

reactjs