如何在React应用页面中集成MailerLite表单？

一、选择正确的脚本方案 #

优先使用平台提供的通用脚本+嵌入式div方案，原因：

• 通用脚本只需全局加载一次，后续新增表单无需重复引入
• 嵌入式div方式适配单页面渲染场景，轻量化且符合官方推荐

二、集成通用脚本 #

由于表单仅在Newsletter组件所在页面使用，推荐在组件内动态加载通用脚本，避免全局不必要的资源占用：

import { useEffect } from 'react';

function Newsletter() {
  useEffect(() => {
    // 检查脚本是否已加载，防止重复注入
    if (window.ml) return;

    const script = document.createElement('script');
    script.src = 'https://assets.mailerlite.com/js/universal.js';
    script.async = true;
    script.onload = () => {
      // 初始化MailerLite账户
      window.ml('account', '6506066');
    };
    document.body.appendChild(script);

    // 组件卸载时清理（若需全局保留脚本可忽略此返回逻辑）
    return () => {
      document.body.removeChild(script);
      delete window.ml;
    };
  }, []);

  // 组件其余代码...
}

如果你的应用多个页面都需要用到MailerLite，也可以直接把通用脚本代码复制到public/index.html的<head>标签内，实现全局加载。

三、渲染嵌入式表单 #

替换现有组件中的表单容器代码，直接使用平台提供的嵌入式div：

function Newsletter() {
  // 上述useEffect代码...

  return (
    <>
      <div className={AppStyle.body}>
        <div className={AppStyle.page}>
          {/* 替换原有表单容器，使用官方嵌入式div */}
          <div className="ml-embedded" data-form="sIV8pP"></div>
        </div>
      </div>
    </>
  );
}

注意：React中用className替代原生HTML的class，data-form属性直接保留即可。

四、处理表单成功回调（可选） #

如果需要自定义订阅成功后的UI变化，推荐用React状态管理替代平台提供的jQuery脚本，更符合React开发范式：

1. 在组件中添加状态：

import { useState } from 'react';

function Newsletter() {
  const [isSubscribed, setIsSubscribed] = useState(false);
  // 其余代码...
}

2. 监听MailerLite的成功事件：

useEffect(() => {
  if (!window.ml) return;

  // 绑定订阅成功事件
  window.ml('on', 'success', () => {
    setIsSubscribed(true);
  });

  // 组件卸载时解绑事件
  return () => {
    window.ml('off', 'success');
  };
}, []);

3. 根据状态切换渲染内容：

return (
  <>
    <div className={AppStyle.body}>
      <div className={AppStyle.page}>
        {!isSubscribed ? (
          <div className="ml-embedded" data-form="sIV8pP"></div>
        ) : (
          <div className={Style['row-success']}>订阅成功！</div>
        )}
      </div>
    </div>
  </>
);

如果一定要沿用平台的jQuery回调，需确保React应用已引入jQuery，再将回调挂载到全局window对象（不推荐，因为React不建议直接操作DOM）：

useEffect(() => {
  window.ml_webform_success_8634499 = function() {
    const $ = window.ml_jQuery || window.jQuery;
    $('.ml-subscribe-form-8634499 .row-success').show();
    $('.ml-subscribe-form-8634499 .row-form').hide();
  };
}, []);

五、为什么不用HTML区域的其他脚本？ #

平台HTML区域的webforms.min.js和fetch请求属于旧版独立表单加载方案，通用脚本已包含这些功能，重复引入会造成资源冗余甚至代码冲突，因此直接忽略即可。

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