如何在React JS应用中嵌入HubSpot表单并正确插入script标签？

你用Helmet注入脚本失效的原因是，Helmet会把脚本插入到页面head，脚本加载完成时你页面上的表单容器还没渲染，或者hbspt初始化时找不到指定的渲染位置，导致表单没有正常生成。使用useEffect在组件挂载后动态加载脚本并初始化表单即可解决，修改后的完整代码如下：

import React, { useEffect } from 'react';
import SEO from "../common/SEO";
import Layout from "../common/Layout";
import ContactOne from "../elements/contact/ContactOne";

const ContactPage = () => {
    useEffect(() => {
        const formContainer = document.getElementById('hubspot-form');
        if (!formContainer) return;

        // 避免重复加载HubSpot脚本
        const existingScript = document.querySelector('script[src="//js-eu1.hsforms.net/forms/shell.js"]');
        const initHsForm = () => {
            window.hbspt.forms.create({
                region: "eu1",
                portalId: "25082527",
                formId: "8a7c2adb-5c41-4c47-8478-b1f1abe01e3f",
                target: '#hubspot-form'
            });
        };

        if (existingScript) {
            window.hbspt && initHsForm();
            return;
        }

        // 动态注入脚本
        const hsScript = document.createElement('script');
        hsScript.src = '//js-eu1.hsforms.net/forms/shell.js';
        hsScript.charset = 'utf-8';
        hsScript.onload = initHsForm;
        document.body.appendChild(hsScript);

        // 组件卸载清理
        return () => {
            formContainer.innerHTML = '';
        };
    }, []);

    return (
        <>
            <SEO title="Contact" desc="EXIGOH - Contact us now"/>
            <Layout>
                <div className="main-content">
                    {/* Start Contact Area  */}
                    <div className="rwt-contact-area rn-section-gap">
                        <div className="container">
                            <div className="row">
                                <div className="col-lg-12 mb--40">
                                    <div className="text-center">
                                        <h1 className="title theme-gradient h2" dangerouslySetInnerHTML={{__html: 'The Easiest Way To Start <br /> fill in & send.'}}/>
                                    </div>
                                </div>
                            </div>
                            
                            {/* 表单渲染容器 */}
                            <div id="hubspot-form"></div>

                            {/*<ContactOne/>*/}
                        </div>
                    </div>
                    {/* End Contact Area  */}
                </div>
            </Layout>
        </>
    )
}
export default ContactPage;

注意事项 #

• 代码中新增了id="hubspot-form"的div作为表单的渲染容器，位置就是你原来标注要插入表单的地方
• target参数必须配置，用来告诉HubSpot表单要渲染到哪个DOM节点下
• 脚本加载逻辑做了去重处理，多次进入页面不会重复加载HubSpot的脚本
• 组件卸载时会自动清空表单内容，避免残留DOM引发的问题

内容的提问来源于stack exchange，提问作者Kyrill