React向无状态函数组件传参报错 鼓机按钮无法播放音频

核心错误：props命名不匹配 #

你在App组件中给Keyboard组件传递的属性名是play，但Keyboard组件解构参数时用的是playSound，导致playSound实际为undefined，点击时调用不存在的方法就会抛出对象相关错误。

次要规范问题 #

React中指定元素类名需要用className属性，不能直接用原生HTML的class，避免和JS的class关键字冲突。

可选优化 #

你的playSound已经使用箭头函数写法，自带this绑定，constructor里的绑定操作可以删除，减少冗余代码。

修复后核心代码 #

class App extends React.Component {
  playSound = (key) => {
    const audio = document.getElementById(key);
    audio.currentTime = 0;
    audio.play();
  }
  render() {
    // 属性名修改为和Keyboard解构参数一致的playSound
    return(
        <Keyboard playSound={this.playSound}/>
    )
  }
}

const Keyboard = ({playSound}) => {
    return TR66.map(sound => {
        // 把class替换为React规范的className
        return (<button className="drum-pad" id={sound.id} onClick={() => playSound(sound.key)}>
          <audio className="clip" id={sound.key} src={sound.url}/>
            <div>{sound.key}</div>
        </button>)
    });
}

其余TR66数组定义、ReactDOM渲染逻辑、CSS、HTML代码无需修改，调整后点击按钮即可正常触发音频播放。

内容的提问来源于stack exchange，提问作者CP McClure