Estoy tratando de incrustar un script de formulario Sharpspring en mi componente React (page.jsx). Para que este formulario se cargue con éxito, debe colocarse fuera del elemento <head></head> y dentro del <div> donde quiero mostrar el formulario.
El código HTML original que necesito incrustar se ve así:
<!-- SharpSpring Form --> <script type="text/javascript"> var ss_form = {'account': 'MzawMDE3tzQzBQ', 'formID': 'szBIMrFMSzbXTUm0TNM1MTc107VMNbfQTTRJTExOTUoySk4zAA'}; ss_form.width = '100%'; ss_form.domain = 'app-3QNK98WC9.marketingautomation.services'; // ss_form.hidden = {'field_id': 'value'}; // Modify this for sending hidden variables, or overriding values // ss_form.target_id = 'target'; // Optional parameter: forms will be placed inside the element with the specified id // ss_form.polling = true; // Optional parameter: set to true ONLY if your page loads dynamically and the id needs to be polled continually. </script> <script type="text/javascript" src="https://koi-3QNK98WC9.marketingautomation.services/client/form.js?ver=2.0.1"></script>Estoy tratando de incrustarlo en page.jsx de esta manera:
import React from "react"; function myComponent() { var ss_form = {'account': 'MzawMDE3tzQzBQA', 'formID': 'szBIMrFMSzbXTUm0TNM1MTc107VMNbfQTTRJTExOTUoySk4zAAA'}; ss_form.width = '100%'; ss_form.domain = 'app-3QNK98WC9Y.marketingautomation.services'; return ( <main> <div className="form"> {ss_form} <script src="https://koi-3QNK98WC9Y.marketingautomation.services/client/form.js?ver=2.0.1" type="text/javascript" /> </div> </main> ); } export default myComponent;Sin embargo, me sale este error:
Error: Objects are not valid as a React child (found: object with keys {account, formID, width, domain}). If you meant to render a collection of children, use an array instead.Sé que se supone que debo usar "matrices en su lugar", pero no pude encontrar ninguna documentación que resolviera este error. ¿Alguna sugerencia sobre cómo podría hacer que este código de inserción funcione?
Gracias.
Pude incrustar el formulario usando helmet .
Primero instalado:
npm install helmetMi código de trabajo se ve así:
import React from "react"; import ReactDOM from "react-dom"; import { Helmet } from 'react-helmet'; function myComponent() { return ( <main> <Helmet> <script src="https://koi-3QNK98WC9.marketingautomation.services/client/form.js?ver=2.0.1" /> <script> {` var ss_form = {'account': 'MzawMDE3tzQzBQ', 'formID': 'szBIMrFMSzbXTUm0TNM1MTc107VMNbfQTTRJTExOTUoySk4zAA'}; ss_form.width = '100%'; ss_form.domain = 'app-3QNK98WC9Y.marketingautomation.services'; ss_form.target_id = 'form'; ss_form.polling = true; `} </script> </Helmet> <div id="form"> </div> </main> ); } export default myComponent; Resulta que el código de inserción de SharpSpring admite la variante ss_form.target_id , que muestra el formulario en la ID designada.
Estoy seguro de que la solución anterior también funcionará para otros javascripts y códigos de inserción.