使用React编写代码组件未渲染 预期按钮无显示问题求助

问题原因 #

你代码里存在2个核心语法错误，直接导致组件没有正常渲染：

• sounds.map的回调函数用了花括号包裹逻辑，但没有显式返回Pad组件，最终map执行后返回的是全为undefined的数组，自然没有内容渲染
• audio标签的资源属性配置错误，不存在source属性，需要用src指定音频资源地址

修正后完整代码 #

const sounds = [
  {
    keyCode: 81,
    keyTrigger: 'Q',
    id: 'Heater-1',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
  },
  {
    keyCode: 87,
    keyTrigger: 'W',
    id: 'Heater-2',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
  }
];

function App(){
    return (
        <div className="app-div bg-info min-vh-100 text-white">
            <div className="text-center">
                {/* 这里把花括号换成圆括号，隐式返回组件，也可以保留花括号加return语句 */}
                {sounds.map((clip) => (
                    <Pad key={clip.id} clip={clip}/>
                ))}
            </div>
        </div>
    )
}

function Pad({clip}) {
    return (
        <div className="btn btn-secondary p-4 m-3">
            {/* 把source属性换成src */}
            <audio id={clip.keyTrigger} src={clip.url}/>   
            {clip.keyTrigger}
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('app'))

额外校验点 #

如果修改后还是有异常，可检查以下配置：

• 确认codepen的HTML代码中存在id为app的根节点
• 确认codepen的JS设置中已经添加了React、ReactDOM依赖
• 若用到了bootstrap样式，确认已经在codepen设置中引入了bootstrap的CSS资源

内容的提问来源于stack exchange，提问作者Pedro Luiz