0

设置

我已经通过 NPM 加载了 Vanilla JS 库 lightgallery.js，并且importing正常。

问题

我正在通过 初始化这个库componentDidMount()，但它无法编译，因为'lightGallery' is not defined. 请参阅下面的示例

componentDidMount()我通过 Chrome 控制台删除和初始化库来验证库正在导入。当我这样做时，它按预期工作。

我不清楚为什么'lightGallery' is not defined在我不使用componentDidMount(). 我猜这要么是DOM加载时元素不存在的问题，要么是我import的设置方式问题。

任何帮助，将不胜感激。

当前页面

这是我设置的精简版本，其中画廊元素硬编码以便于解释。

import React, { Component } from 'react';
import 'lightgallery.js';

class Gallery extends Component {

    componentDidMount() {
        lightGallery(document.getElementById('lightgallery'));
    }

    render() {

        return (
            <>
                <section>
                    <h1>Gallery</h1>
                </section>
                <section>
                    <div id="lightgallery">
                        <a href="img/img1.jpg">
                            <img src="img/thumb1.jpg" />
                        </a>
                        <a href="img/img2.jpg">
                            <img src="img/thumb2.jpg" />
                        </a>
                        <a href="img/img3.jpg">
                            <img src="img/thumb3.jpg" />
                        </a>
                    </div>
                </section>
            </>
        ); 
    }
}

export default Gallery;
4

0 回答 0