為什么使用“key”作為對象的鍵會導致調用 object.key 返回 null？

Question

我最近制作了一個免費代碼營項目，其中涉及使用 React 制作鼓機。 我創建了一個對象數組，其中包含多個鍵：“值”對，其中包含要在整個應用程序中使用的數據。

該數組如下所示：

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>元素鏈接的<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);的值const sound = document.getElementById(this.props.key); 為空。

當我將對象鍵“key”更改為“keyTrigger”以便調用this.props.keyTrigger的代碼與值arr[i].keyTrigger ，問題得到解決並且該值被正確調用，以便該按鈕按預期工作。

我只是想更好地理解為什么使用的詞的這種簡單變化會造成如此大的差異。 據我了解， Object.key 不是一種方法（如果我錯了，請糾正我）； 從字面上看，這里的問題是使用“鑰匙”一詞作為鑰匙的名稱嗎？

非常感謝任何和所有幫助！

Answer 1

key不是典型的道具，僅用於幫助 React正確處理列表。

為了阻止人們將密鑰用於其他目的，它不能從組件本身獲得。

如果您只想傳遞一個“密鑰”，那么只需為道具使用另一個名稱。