你好，我不明白为什么我在这里得到一个错误。错误是一个Unexpected标记，expected ";(33:8)有人能告诉我为什么会这样吗?
我也试图把代码放在return语句体中，但是对于const(第32行)和keys都给出了相同的错误。
import React from 'react'; <br>
import Clap from './sounds/clap.wav'; <br>
import Hihat from './sounds/hihat.wav'; <br>
import Kick from './sounds/kick.wav'; <br>
import Openhat from './sounds/openhat.wav'; <br>
import Boom from './sounds/boom.wav'; <br>
import Ride from './sounds/ride.wav'; <br>
import Snare from './sounds/snare.wav'; <br>
import Tom from './sounds/tom.wav'; <br>
import Tink from './sounds/tink.wav'; <br>
import './Drumkit.css';
const Drumkit = () => {
window.addEventListener('keydown', function(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
if (!audio) return;
audio.currentTime = 0;
audio.play();
key.classList.add('playing');
})
function removeTransition(e) {
if(e.propertyName !== 'transform') return;
this.classList.remove('playing');
}
const keys = ( document.querySelectorAll('.key')
keys.forEach(key => key.addEventListener('transitionend', removeTransition))
window.addEventListener('keydown', playSound)
return (
<body>
<div class="keys">
<div data-key="65" class="key">
<kbd>A </kbd>
<span class="sound">clap</span>
</div>
<div data-key="83" class="key">
<kbd>S</kbd>
<span class="sound">hihat</span>
</div>
<div data-key="68" class="key">
<kbd>D</kbd>
<span class="sound">kick</span>
</div>
<div data-key="70" class="key">
<kbd>F</kbd>
<span class="sound">openhat</span>
</div>
<div data-key="71" class="key">
<kbd>G</kbd>
<span class="sound">boom</span>
</div>
<div data-key="72" class="key">
<kbd>H</kbd>
<span class="sound">ride</span>
</div>
<div data-key="74" class="key">
<kbd>J</kbd>
<span class="sound">snare</span>
</div>
<div data-key="75" class="key">
<kbd>K</kbd>
<span class="sound">tom</span>
</div>
<div data-key="76" class="key">
<kbd>L</kbd>
<span class="sound">tink</span>
</div>
</div>
<audio data-key="65" src={Clap}></audio>
<audio data-key="83" src={Hihat}></audio>
<audio data-key="68" src={Kick}></audio>
<audio data-key="70" src={Openhat}></audio>
<audio data-key="71" src={Boom}></audio>
<audio data-key="72" src={Ride}></audio>
<audio data-key="74" src={Snare}></audio>
<audio data-key="75" src={Tom}></audio>
<audio data-key="76" src={Tink}></audio>
</body>
)
}
export default Drumkit;
这部分代码看起来像是
const keys = ( document.querySelectorAll('.key')
试着这样修改:
const keys = document.querySelectorAll('.key')
keys.forEach(key => key.addEventListener(
'transitionend',
removeTransition
))
window.addEventListener('keydown', playSound)
i认为这是你的问题，如果不尝试添加括号的if语句，简化的if往往是有问题的，如果不正确使用
if(e.propertyName !== 'transform'){
return;
}