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

【问题标题】：how do I use a node module script in react.js?如何在 react.js 中使用节点模块脚本？
【发布时间】：2020-08-25 19:31:24
【问题描述】：

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

这里是 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;
        }
}

【问题讨论】：

您是否尝试过插入脚本标签并安装运行 npm CLI 的 swipi 卡库？
我不这么认为，我该怎么做呢？我在命令行中运行了“npm install swipi-cards --save”，然后尝试提供目录，但它似乎不起作用。
检查 package.json 依赖是注入还是手动插入。通过文档。 docs.npmjs.com/…
package.json 的哪一部分将 swipi-cards 显示为依赖项？
我想我一定是提供了错误的来源，但无法锻炼我在错误导入模块时出错的地方？

标签： javascript html css reactjs typescript

【解决方案1】：

好的，所以使用它作为源代码是可行的，但我不知道为什么这一定意味着节点模块没有任何想法？

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

【讨论】：