在 React 中悬停时覆盖，JS 方式

Question

我正在尝试使用本教程在 React 中悬停图像时进行叠加：w3 schools tutorial。

我的代码：

<div className="grid-item" key={movie.id}>
                            <img className="grid-images" alt={movie.title} src={movie.src}>
                                <div className="overlay">{movie.title}</div>
                    </div>

我的错误信息：Parsing error: Expected corresponding JSX closing tag for <img>

由于 JSX 不允许不关闭 img-tag，所以这种方法不起作用。我似乎无法在 React with css 中找到替代方法。任何人？ :) 谢谢！

Answer 1

您只需要通过在 >: 之前添加“/”来自动关闭 img 标签：

<img className="grid-images" alt={movie.title} src={movie.src} />