如何在 React.js 中使用 lightGallery

Question

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

我的行动： 1) 使用 npm 安装

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

2) 将插件导入控制器：

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，它的功能（全屏、缩放、移动设备友好等......）。

Answer 1

当您调用 jQuery 初始化程序时，组件尚未呈现，因此您尝试选择的 DOM 元素不存在。 You should use refs 等待您的 lightgallery 容器渲染，然后才对其进行初始化：

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 以删除不需要的事件处理程序。