0

我正在尝试将lightgallery 插件集成到我自己的项目中。但我不能在 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，它的功能（全屏、缩放、移动设备友好等......）。

4

1 回答 1

2

当您调用 jQuery 初始化程序时，组件尚未呈现，因此您尝试选择的 DOM 元素不存在。您应该使用 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。

于 2018-03-12T10:45:39.523 回答