时间戳

首页 > 解决方案 > 在 React 组件中显示自定义第三方 html 元素

javascript - 在 React 组件中显示自定义第三方 html 元素

问题描述

我正在尝试显示从功能性 React 组件内的第三方库返回的自定义 HTML 模式。

这是应该加载模态的函数，它在 useEffect 中被调用：

const modalRef = useRef()
   
const loadScript = async () => {
    // custom script loader 
    const loader = new ScriptLoader({
      src: 'checkout.reepay.com/checkout.js',
      global: 'Reepay',
    })
    
    await loader.load()

    // flag for displaying the div
    setLoaded(true)

    // Reepay.ModalCheckout(sessionId) should open a modal
    modalRef.current.innerHTML = new window.Reepay.ModalCheckout(sessionId)
}

在我的回报：

return loaded ? <div ref={modalRef}></div> : <></>

当我尝试显示组件时，我只是在 div 中得到一个 [Object object]。我不知道使用 refs 是否可行，我是初学者，我并不真正了解如何在 React 中集成第三方代码。

标签： javascriptreactjs

解决方案

从他们的文档（https://docs.reepay.com/reference#overlay-checkout）看来， instance ofReepay.ModalCheckout是一个对象，而不是 HTML：

// Step 1: Initialize
var rp = new Reepay.ModalCheckout();  // No session id given

// ... Backend to backend call ... 

// Step 2: Load the modal 
rp.show(' YOUR SESSION ID HERE ');  // Call the .show function with the session id

您不必将其注入到模态中，因为它带有自己的模态。

如果你真的想将它注入容器中，你应该使用：

var rp = new Reepay.EmbeddedCheckout(' YOUR SESSION ID HERE ', { html_element: 'rp_container' } );

推荐阅读