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

编程问答 2022-06-07

问题描述

我想在灯箱中输入图片，但是从我看到的问题是，在将img源加载到代码内部之前先应用CSS

问题：灯箱激活时没有图像源。

仅当我手动放置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;

我为每个道具传递一个布尔值'set​​Activity'，以检查是否单击了图像以将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标签时，点击该图片时不会出现问题。

我可以设置优先级吗？

解决方法

您有两个onClick处理程序，因此不执行第二个处理程序。可以更改为：

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