Estoy tratando de agregar algunos botones de donación de Gofundme en una página de reacción, pero ni siquiera se muestra en la pantalla.
const Donation = () => { return ( <div> <div className="gfm-embed" data-url="https://www.gofundme.com/f/theyre-the-real-victims/widget/large/"></div> <script defer src="https://www.gofundme.com/static/js/embed.js"></script> </div> ) } export default DonationNunca he hecho nada como esto antes. Cualquier ayuda será apreciada.
React usa innerHTML para agregar elementos al DOM. innerHTML deshabilita la ejecución de etiquetas de script .
HTML5 especifica que una etiqueta insertada con innerHTML no debe ejecutarse.
Por lo tanto, la forma recomendada de incluir etiquetas de secuencias de script es a través del gancho useEffect
const Donation = () => { useEffect(() => { const script = document.createElement('script'); script.src = "https://www.gofundme.com/static/js/embed.js"; script.async = true; document.body.appendChild(script); return () => { document.body.removeChild(script); } }, []); return ( <div> <div className="gfm-embed" data-url="https://www.gofundme.com/f/theyre-the-real-victims/widget/large/"></div> </div> ) }; export default Donation