在组件内使用脚本反应

Question

我正在尝试通过 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) 内的一个元素上，但它仍然安装在 root 上并卸载我的所有组件。所以我认为这是因为它是在 window new window.Reepay.ModalCheckout(reepayId).

上实例化的

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

编辑显然脚本没有 return JSX...

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

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

Answer 1

脚本没有 return JSX，这就是为什么我无法在组件渲染中渲染它。所以我不必 returning 函数，只需调用构造函数 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)
        });
    }

在组件内使用脚本反应

Using a script inside component react

javascript

reactjs

load