javascript - 在 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} />