文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将lightGallery与React.js结合使用

问如何将lightGallery与React.js结合使用
EN

Stack Overflow用户

提问于 2018-03-12 10:03:13

回答 1查看 2.9K关注 0票数 0

我正在尝试将光廊插件集成到我自己的项目中。但我不能用它来控制反应。

我的行动: 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

这种配置我什么也得不到。谁来解决这个问题？或者有一个更友好的图片库插件，它的功能(全屏，变焦，移动设备友好等等)。

jquery

reactjs

lightgallery

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-03-12 10:45:39

当您调用您的jQuery初始化程序时，组件尚未呈现，因此您要选择的DOM元素不存在。你应该用参考文献以等待您的光明库容器呈现，然后才初始化它：

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>
        )
    }
}

还请注意，当组件卸载以删除不需要的事件处理程序时，您应该销毁event图库。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49232497

复制

相似问题

问如何将lightGallery与React.js结合使用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将lightGallery与React.js结合使用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将lightGallery与React.js结合使用
EN