HTML声音元素没有从react传递的url中获取其来源

Question

我正在代码笔中的react中构建这个鼓点。但是，当我将道具传递给音频元素的源子项时，它似乎没有获得任何指向音频文件的链接。我试着输入props.audioSource所在的url，然后就成功了。

react中是否有一些怪癖，这样你就不能将url传递给html的音频元素了？

代码笔项目

const DrumTileComponent = (props) => {
return (
<div className=".drum-pad" id="{props.drumPadId}">
<div> 
<audio className="clip" id="{props.drumPadId}" controls> 
<source src="{props.audioSource}"  type="audio/mp3" />
Your browser does not support the audio element.
</audio>
</div>
</div>
);
};
const DisplayComponent = (props) => {
return (
<div id="display">

</div>
);
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {

}
}

render() {
return (
<div id="drum-machine">
<DrumTileComponent drumPadId="A" audioSource="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" />
Hello
</div>
);
};
};
ReactDOM.render(<App />, document.getElementById("App"));

Answer 1

您可以将源作为变量传递，而无需使用字符串包装它

const DrumTileComponent = (props) => {
return (
<div className=".drum-pad" id="{props.drumPadId}">
<div> 
<audio className="clip" id="{props.drumPadId}" controls> 
<source src={props.audioSource}  type="audio/mp3" />
Your browser does not support the audio element.
</audio>
</div>
</div>
);
};