Блог

Главная - Вопросы по программированию - как мне использовать скрипт модуля узла в react.js ?

как мне использовать скрипт модуля узла в react.js ?

#javascript #html #css #reactjs #typescript

#javascript #HTML #css — файл #reactjs ( реакция ) #typescript #css #reactjs

Вопрос:

Элемент работает при использовании внешнего модуля узла, но не при использовании локально загруженного модуля узла, но я не могу понять, почему?

вот библиотека Swipi-карт:https://github.com/riolcrt/swipi-cards/blob/master/demo/index.html

Мой код пока (работает), но когда я использую модуль локального узла в качестве исходного кода, это не приводит к каким-либо исправлениям?

 import React, { useState, useEffect } from 'react';
import Data from '../Data/webApps_data';

function Webapps() {

    const [loading_animation, setloading_animation] = useState(false);
    const [arrayChecker, set_arrayChecker] = useState(0);

    useEffect(() => {
        if (loading_animation === false) {
            setTimeout(() => {
                setloading_animation(!loading_animation);
                console.log()
            }, 100);
        }

        const script = document.createElement('script');
        script.src = "https://unpkg.com/swipi-cards@1.0.0/dist/swipi-cards/swipi-cards.js";

        script.async = true;

        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        }
    }, [loading_animation]);

    const arrayLimiter = () => {
        if (arrayChecker < (Data.length - 1)) {
            set_arrayChecker(arrayChecker   1)
        } else {
            set_arrayChecker(0)
        }
        console.log(Data);
    };

    const filteredData = Data[arrayChecker];
    const textTransition = loading_animation ? 'text_transition ease' : 'text_transition';
    const elementTransition = loading_animation ? 'element_transition ease' : 'element_transition';

    //swipicard script

    return (
        <div className='webAppStyles'>
            <rg-swipi-cards stack-offset-y="0.3" class='hydrated'>
                <rg-swipi-card left-color='green' right-color='green' class='hydrated'>
                    <p>test1</p>
                </rg-swipi-card>
                <rg-swipi-card left-color='green' right-color='green' class='hydrated'>
                    <p>test2</p>
                </rg-swipi-card>
            </rg-swipi-cards>
        </div>
    )

}

scss styles:
 rg-swipi-cards {
        display: flex;
        align-self: center;
        background: chocolate;
        width: 350px !important;
        height: 400px !important;
        align-items: center;
        justify-content: center;
        rg-swipi-card {
            width: 100%;
            position: absolute;
            transition: all 0.5s ease-in-out 0s;
            z-index: 4;
            opacity: 1.33333;
        }
        p {
           text-align: center;
        }
}

Комментарии:

1. Вы пробовали вставлять тег as script и устанавливать библиотеку swipi card под управлением npm CLI?

2. Я так не думаю, как бы мне это сделать? Я запустил ‘npm install swipi-cards —save’ в своей командной строке, затем попытался указать каталог, но, похоже, это не работает.

3. Проверьте, введена ли зависимость package.json, или вставьте ее вручную. просмотрите документы. docs.npmjs.com /…

4. какая часть package.json показывает swipi-cards как зависимость?

5. Я думаю, что я, должно быть, указываю неправильный источник, но не могу понять, где я ошибаюсь при неправильном импорте модуля?

Ответ №1:

хорошо, поэтому использование этого в качестве исходного кода работает, но я не знаю, почему это должно означать, что модуль узла не работает с любыми идеями?

  script.src = "https://unpkg.com/swipi-cards@1.0.0/dist/swipi-cards/swipi-cards.js";