在 Reactjs 中应用 css 之前加载 img 标签源

Question

我想在我的 Lightbox 中输入一张图片，但我看到的问题是 CSS 是在 img 源可以加载到标签内之前应用的

问题：灯箱在没有图像源的情况下激活。

只有在我手动放置 img 源时才有效。

class LightboxTest extends Component {
    state = {};

    render() {
        return (<React.Fragment>
            <div
                className={this.props.setActivity === false ? 'lightboxOff' : this.props.setActivity === true ? 'lightboxActive' : ''}
            >
                <img alt="" src={this.props.lbImages} />
            </div>
        </React.Fragment>);
    }
}

export default LightboxTest;

我正在为每个道具传递一个布尔值“setActivity”，以检查是否已单击图像以将 Lightbox Active 和“lbImages”设置为我在单击图像时应加载的源。

<div className="header">
    {images.map((image) => (
        <React.Fragment key={image.id}>
            <img
                alt=""
                src={image.src}
                key={image.id}
                onClick={() => {
                    setLightboxImage(image.src);
                }}
                onClick={handleClick}
            />
        </React.Fragment>
    ))}
</div>

当我删除灯箱 div 标记时，单击时图像显示没有问题。

我可以设置优先级吗？

Answer 1

你有两个 onClick 处理程序，所以第二个没有执行。可以改成：

onClick={() => {
  setLightboxImage(image.src);
  handleClick();
}}