我试图显示一个自定义HTML模式，该模式是从功能性React组件内的第三方库返回的。
这是应该加载模态的函数，在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中集成第三方代码。
从他们的文档（https://docs.reepay.com/reference#overlay-checkout）中，似乎的实例Reepay.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' } );
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句