如何在React页面中完整嵌入HubSpot Call-to-Action嵌入代码？

问题描述 #

我有一段HubSpot Call-to-Action的嵌入代码，想要注入到React页面中：

<!--HubSpot Call-to-Action Code -->
<span class="hs-cta-wrapper" id="*******">
  <span class="*******" id="********">
    <!--[if lte IE 8]>
      <div id="hs-cta-ie-element"></div>
    <![endif]-->
    <a href="********" target="_blank" rel="noopener">
      <img class="hs-cta-img" id="**********" style="border-width:0px;" height="20" width="20" src="**************"  alt="New call-to-action"/>
    </a>
  </span>
  <script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script>
  <script type="text/javascript">
    hbspt.cta.load(*****, '********', {"useNewLoader":"true","region":"na1"});
  </script>
</span>
<!-- end HubSpot Call-to-Action Code -->

我尝试用const cta = "嵌入代码内容"，再通过dangerouslySetInnerHTML={{__html: cta}}注入，但这种方法对script标签无效，请问怎么才能完整嵌入这段代码，不遗漏任何部分？

解决方案 #

React的dangerouslySetInnerHTML不会自动执行注入的script标签，需要拆分代码逻辑，手动处理脚本加载和初始化，具体实现如下：

完整组件示例 #

import { useEffect, useRef } from 'react';

const HubSpotCTA = () => {
  const ctaContainerRef = useRef(null);

  useEffect(() => {
    // 1. 渲染静态HTML部分（不含script标签）
    const staticHtml = `
      <span class="hs-cta-wrapper" id="*******">
        <span class="*******" id="********">
          <!--[if lte IE 8]>
            <div id="hs-cta-ie-element"></div>
          <![endif]-->
          <a href="********" target="_blank" rel="noopener">
            <img class="hs-cta-img" id="**********" style="border-width:0px;" height="20" width="20" src="**************"  alt="New call-to-action"/>
          </a>
        </span>
      </span>
    `;
    if (ctaContainerRef.current) {
      ctaContainerRef.current.innerHTML = staticHtml;
    }

    // 2. 动态加载HubSpot外部脚本
    const script = document.createElement('script');
    script.src = 'https://js.hscta.net/cta/current.js';
    script.charset = 'utf-8';
    script.onload = () => {
      // 3. 脚本加载完成后执行CTA初始化代码
      if (window.hbspt?.cta) {
        hbspt.cta.load(*****, '********', {"useNewLoader":"true","region":"na1"});
      }
    };
    document.body.appendChild(script);

    // 组件卸载时清理脚本，避免重复加载
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div ref={ctaContainerRef}></div>;
};

export default HubSpotCTA;

关键说明 #

• 替换代码中所有*****为你实际的HubSpot CTA ID和配置参数
• 通过useRef获取容器元素，直接写入静态HTML内容
• 动态创建script标签并监听onload事件，确保脚本加载完成后再执行初始化逻辑
• 组件卸载时移除脚本，避免重复加载导致的资源浪费

内容的提问来源于stack exchange，提问作者Ibrahim EL-Sanosi