Question

第一个版本不起作用，图像不显示。没有错误，什么也没显示

const grid_display = ({ url, key }) =>
React.createElement("audio", { id: "woof", src: "https://free-screensavers-backgrounds.com/ringtones/funny/dog-barking.mp3"},
React.createElement("div", { onMouseOver: "playSound('woof')", className: "image-item", key: key },
React.createElement("a", { href: "https://www.google.com"},
React.createElement("img", { className: "grid-img", src: url }))));

此第二版确实有效！图像将按预期显示。

 const grid_display = ({ url, key }) =>
 React.createElement("div", {className: "image-item", key: key },
 React.createElement("a", { href: "https://www.google.com"},
 React.createElement("img", { className: "grid-img", src: url })));

任何人都有createElement音频导致此问题的原因吗？

PS。最终结果是在网格中显示图像。将鼠标悬停在每个图像上时，我需要它们才能播放声音。注意：图像/声音实际上是动态的。

感谢您的帮助！

Answer 1

它确实创建了，您可以使用浏览器开发工具检查html代码。您尚未添加controls属性，因为该属性在html中不可见。 / p>

const grid_display = ({ url, key }) =>
React.createElement("audio", { id: "woof", controls: "controls", src: "https://free-screensavers-backgrounds.com/ringtones/funny/dog-barking.mp3"},
React.createElement("div", { onMouseOver: "playSound('woof')", className: "image-item", key: key },
React.createElement("a", { href: "https://www.google.com"},
React.createElement("img", { className: "grid-img", src: url }))));

演示

const audio = document.createElement('audio');
audio.src = "https://free-screensavers-backgrounds.com/ringtones/funny/dog-barking.mp3";
// audio element added but not visible in html
//audio.setAttribute("controls", "controls");
document.body.append(audio);

const showAudio = document.createElement('audio');
showAudio.src = "https://free-screensavers-backgrounds.com/ringtones/funny/dog-barking.mp3";
// Now visible
showAudio.setAttribute("controls", "controls");
document.body.append(showAudio);

React.createElement（“ audio”，...不起作用？怎么了？

1 个答案:

演示