[英]I'm using React and my components are not rendered
I'm trying to follow a React tutorial this code should render some buttons, but it isn't happening.我正在尝试遵循 React 教程,此代码应该呈现一些按钮,但它没有发生。 I'm using codepen.io to make the code and I can send the tutorial link if necessary.
我正在使用 codepen.io 制作代码,如有必要,我可以发送教程链接。
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">
{sounds.map((clip) => {
<Pad key={clip.id} clip = {clip}/>
})}
</div>
</div>
)
}
function Pad({clip}) {
return (
<div className="btn btn-secondary p-4 m-3">
<audio id={clip.keyTrigger} source = {clip.url}/>
{clip.keyTrigger}
</div>
);
}
ReactDOM.render(<App />, document.getElementById('app'))
You forgot return your Pad component.您忘记返回 Pad 组件。
{sounds.map((clip) => {
return <Pad key={clip.id} clip = {clip}/>
})}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.