在组件内使用脚本做出反应答案

【问题标题】：Using a script inside component react在组件内使用脚本做出反应
【发布时间】：2020-08-21 21:21:10
【问题描述】：

我正在尝试通过 js 脚本使用支付模式。我怀疑因为我将它安装在 root div 上，所以它会卸载所有组件。我想有条件地加载它，以便用户可以取消它并稍后打开它。

    const loadScript = function (src) {
        var tag = document.createElement('script');
        tag.async = false;
        tag.src = src;
        document.getElementById('something').appendChild(tag)
    }

    useEffect(() => {
        loadScript('https://checkout.reepay.com/checkout.js')
        reepay.getId().then(data => {
            setReepayId(data.reepay.id)
        })
    }, []);

    const loadReepay = () => {
        return new window.Reepay.ModalCheckout(reepayId)
    }

//how I am mounting it
{isPaying ? loadReepay() : <> </>}

我曾尝试使用 HOC 库，但在有条件地加载它时遇到了问题，但它确实安装在了正确的组件上。我还尝试将它安装在组件 document.getElementById('element-id-inside-component').appendChild(tag) 内的一个元素上，但它仍然安装在根目录上并卸载我的所有组件。所以我认为这是因为它是在窗口 new window.Reepay.ModalCheckout(reepayId) 上实例化的。

这是一个说明问题的代码框： https://codesandbox.io/s/hidden-thunder-3h5vj?file=/src/App.js:0-1070

编辑显然脚本没有返回 JSX...

    const loadReepay = () => {
        new window.Reepay.ModalCheckout(reepayId)
    }

成功了，如果有人可以为来的人提供答案，那么我会将其标记为已回答并投赞成票。

【问题讨论】：

完全可以回答自己的问题，然后将其标记为正确答案。见：stackoverflow.com/help/self-answer

标签： javascript reactjs load

【解决方案1】：

脚本没有返回 JSX，这就是我无法在组件渲染中渲染它的原因。所以我只需要调用构造函数new window.Reepay.ModalCheckout(reepayId)，而不是返回函数。

    const loadScript = function (src) {
        const element = document.createElement('script');
        element.async = false;
        element.src = src;
        document.body.appendChild(element)
    }

    useEffect(() => {
        loadScript('https://checkout.reepay.com/checkout.js')
        reepay.getId().then(data => {
            setReepayId(data.reepay.id)
        })
    }, []);

    const loadReepay = () => {
        const rp = new window.Reepay.ModalCheckout(reepayId)
        rp.addEventHandler(window.Reepay.Event.Cancel, function (data) {
            setIsPaying(false)
        });
    }

【讨论】：