如何在React.js中使用lightGallery [英] How to use lightGallery with React.js

问题描述

我正在尝试将 lightgallery插件集成到我自己的项目中.但是我不能在React控制器中使用它.

I am trying to integrate lightgallery plugin in my own project. But i can't using it in React controller.

我的动作: 1)使用npm安装

My actions: 1) installing with npm

npm install lightgallery lg-thumbnail lg-autoplay lg-video lg-fullscreen lg-pager lg-zoom lg-hash lg-share --save-dev

2)将插件导入控制器:

2) import plugin into controller:

import React, {Component} from 'react'
import HomeDom from './Home'
import $ from 'jquery'
import 'lightgallery';

export default class HomeClass extends Component {
render() {
    $('#lightgallery').lightGallery();
    return (
        <HomeDom />
    )
}
}

查看组件HomeDom:

import React from 'react'

const HomeDom = () => (
    <div className="home-main-wrapper">
        <div className="catalog-body">
            <div id="lightgallery">
                <a href="src">
                    <img alt="thumbnail" />
                </a>
                <a href="src">
                    <img alt="thumbnail" />
                </a>
            </div>
        </div>
    </div>
);

export default HomeDom

使用此配置我一无所获.有人解决了这个问题吗?或者有一个更友好的图库插件，例如lightgallery，具有其功能(全屏，缩放，对移动设备友好等).

I get nothing with this configuration. Somebody solve this problem? Or there is a more friendly gallery plugin like lightgallery with its features (fullscreen, zoom, mobile device friendly and so on...).

推荐答案

调用jQuery初始值设定项时，该组件尚未呈现，因此您要选择的DOM元素不存在. 您应该使用refs 来等待lightgallery容器的渲染，并且仅然后将其初始化:

The moment you call your jQuery initializer the component has not been rendered yet and therefore the DOM element you are trying to select does not exist. You should use refs to wait for your lightgallery container to render and only then initialize it:

import React, {Component} from 'react'
import HomeDom from './Home'
import $ from 'jquery'
import 'lightgallery';

export default class Home extends Component {
    onLightGallery = node => {
        this.lightGallery = node;
        $(node).lightGallery();
    }

    componentWillUnmount() {
        $(this.lightGallery).data('lightGallery').destroy(true);
    }

    render() {
        return (
            <div className="home-main-wrapper">
                <div className="catalog-body">
                    <div id="lightgallery" ref={this.onLightGallery}>
                        <a href="src">
                            <img alt="thumbnail" />
                        </a>
                        <a href="src">
                            <img alt="thumbnail" />
                        </a>
                    </div>
                </div>
            </div>
        )
    }
}

还请注意，在卸载组件时，您应该销毁lightgallery，以删除不需要的事件处理程序.

Also note that you should destroy the lightgallery when your component unmounts to remove unneeded event handlers.

这篇关于如何在React.js中使用lightGallery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！