Блог

Недавно я сделал проект для free code camp, который включал в себя создание драм-машины с 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> элементом:

 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.

Когда я изменил objects key «key» на «keyTrigger», чтобы вызываемый код, this.props.keyTrigger который привязан к значению arr[i].keyTrigger , был решен, и значение было правильно вызвано, чтобы кнопка работала как задумано.

Я просто хочу лучше понять, почему это простое изменение в том, какое слово использовалось, вызвало такую большую разницу. Насколько я понимаю, Object.key не является методом (поправьте меня, если я ошибаюсь); проблема здесь в буквальном использовании слова ‘key’ в качестве имени ключа?

Любая помощь приветствуется!

key не является типичным prop и используется только для того, чтобы помочь React правильно обрабатывать списки.

Чтобы препятствовать людям использовать ключ для других целей, он недоступен из самого компонента.

Если вы просто хотите передать «ключ», то просто используйте другое имя для prop.