将 SharpSpring 表单嵌入到 React 组件中

Question

我正在尝试将 Sharpspring 表单脚本嵌入到我的 React (page.jsx) 组件中。要成功加载此表单，需要将其放置在 outsite <head></head> 元素内，并在 <div> 内我要显示表单的位置。

我需要嵌入的原始 HTML 代码如下所示：

<!-- 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>

我正在尝试以这种方式将其嵌入 page.jsx：

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;

但是，我得到这个错误：

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.

我知道我应该改用“数组”，但我找不到任何解决此错误的文档。关于如何使此嵌入代码正常工作有什么建议吗？

谢谢。

Answer 1

我能够使用 helmet 嵌入表单。

首次安装：

npm install helmet

我的工作代码如下所示：

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;

原来 SharpSpring 嵌入代码支持变体 ss_form.target_id，它在指定的 ID 上显示表单。

我确信上述解决方案也适用于其他 javascript 和嵌入代码。

将 SharpSpring 表单嵌入到 React 组件中

Embed SharpSpring form into React component

javascript

embed

jsx

reactjs

sharpspring