如何在 react.js 中使用节点模块脚本？

Question

该元素在使用外部节点模块时有效，但在使用本地下载的节点模块时无效，但我不知道为什么？

这是 Swipi-cards 库： 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;
        }
}

Answer 1

好的，所以使用它作为源工作，但我不知道为什么这一定意味着节点模块不起作用任何想法？

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