React.createElement ("audio", ... не работает? Что не так?

Question

1-я версия не работает, изображения не показывают.Нет ошибок, просто ничего не отображается

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 }))));

Эта 2-я версия работает!Изображения отображаются должным образом.

 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.

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);