使用React.createElement，当将鼠标悬停在图像上时如何播放声音？

Question

我有一个工作网格，其中包含图像和链接，因此，单击图像时，它将带您到链接。

这是有效的Axios代码。 （工作表示此const是其他代码的一部分）：

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

所以我需要在代码中添加以下内容：

1. 鼠标悬停/悬停事件
2. 通过脚本功能播放mp4文件（基本上是声音的链接）
3. 保留相同的代码，只是添加声音的播放
4. 注意：这段代码是动态的：所有图像，链接，声音都从数据库传递到此脚本中。
5. 不能使用任何类型的额外插件。
6. 我希望只添加正确的行或语法，以便React.createElement语句起作用/添​​加mouseover事件或悬停事件。

就声音的播放方式而言...以任何快速，简单，占用最少资源的方式等等。我认为声音片段只会是5秒，最多10秒。

所以，我遇到的更好的问题是，您如何提出此解决方案...

https://css-tricks.com/play-sound-on-hover/?fbclid=IwAR29jK_YgvtCV6Yvl9gWEwa3-P1n6lHEKKZmBoKnR0M2QHMnrCp-3g_7SQo

...在上面的React.createElement语句中？