Реагируйте: Сценарий «Не удалось скомпилировать» с помощью componentDidMount () - PullRequest
Новая
       7

Реагируйте: Сценарий «Не удалось скомпилировать» с помощью componentDidMount ()

0 голосов
/ 02 ноября 2018

Настройка

Я загрузил библиотеку Vanilla JS lightgallery.js через NPM и 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;
...