如何在React中集成Mailerlite.com邮件订阅表单及对应JavaScript代码？

Hey there! 要在React项目里集成MailerLite的订阅表单，核心就是处理它的嵌入脚本和React虚拟DOM的适配问题。下面我会分享几种实用的实现方式，从快速上手到灵活定制的都有：

方法1：直接使用dangerouslySetInnerHTML（快速上手） #

如果你的表单是MailerLite后台生成的完整HTML嵌入代码（自带样式和初始化脚本），可以用React的dangerouslySetInnerHTML直接渲染——别担心这个属性的"dangerously"前缀，只要是官方生成的可信代码，完全可以放心用。

步骤很简单：

1. 从MailerLite后台复制你的表单嵌入代码
2. 在React组件里把代码存为字符串，通过dangerouslySetInnerHTML渲染

import React from 'react';

const MailerLiteForm = () => {
  // 替换成你从MailerLite复制的完整嵌入代码
  const formHTML = `
    <div class="ml-form-embed" data-account="你的账户ID" data-form="你的表单ID"></div>
    <script>
      (function(m,a,i,l,e,r){ m['MailerLiteObject']=e;function f(){
      var c={ a:arguments,q:[]};var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);}
      f.q=f.q||[];m[e]=m[e]||f.bind(f.q);m[e].q=m[e].q||f.q;r=a.createElement(i);
      var _=a.getElementsByTagName(i)[0];r.async=1;r.src=l+'?v'+(~~(new Date().getTime()/1000000));
      _.parentNode.insertBefore(r,_);})(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');

      ml('account', '你的账户ID');
    </script>
  `;

  return <div dangerouslySetInnerHTML={{ __html: formHTML }} />;
};

export default MailerLiteForm;

方法2：用useEffect动态加载脚本（更React化） #

如果不想用dangerouslySetInnerHTML，可以通过useEffect钩子动态加载MailerLite的脚本并初始化表单，这种方式更可控，也符合React的组件生命周期规范。

import React, { useEffect } from 'react';

const MailerLiteForm = () => {
  const ACCOUNT_ID = '你的账户ID';
  const FORM_ID = '你的表单ID';

  useEffect(() => {
    // 避免重复加载脚本
    if (window.ml) {
      ml('account', ACCOUNT_ID);
      ml('form', FORM_ID, { element: '#mailerlite-container' });
      return;
    }

    // 创建并加载脚本
    const script = document.createElement('script');
    script.src = 'https://static.mailerlite.com/js/universal.js';
    script.async = true;
    script.onload = () => {
      // 脚本加载完成后初始化表单
      window.ml('account', ACCOUNT_ID);
      window.ml('form', FORM_ID, { element: '#mailerlite-container' });
    };

    document.body.appendChild(script);

    // 组件卸载时清理资源
    return () => {
      document.body.removeChild(script);
      delete window.ml;
    };
  }, [ACCOUNT_ID, FORM_ID]);

  return <div id="mailerlite-container"></div>;
};

export default MailerLiteForm;

方法3：自定义表单+SDK回调（高级定制） #

如果需要完全自定义表单UI，同时利用MailerLite的订阅处理逻辑，可以直接调用官方SDK，还能添加提交成功/失败的回调逻辑。

import React, { useEffect, useRef } from 'react';

const CustomMailerLiteForm = () => {
  const formRef = useRef(null);
  const ACCOUNT_ID = '你的账户ID';

  useEffect(() => {
    const loadSDK = async () => {
      if (!window.ml) {
        // 异步加载SDK脚本
        await new Promise(resolve => {
          const script = document.createElement('script');
          script.src = 'https://static.mailerlite.com/js/universal.js';
          script.async = true;
          script.onload = resolve;
          document.body.appendChild(script);
        });
        window.ml('account', ACCOUNT_ID);
      }

      // 订阅成功回调
      window.ml('on', 'success', () => {
        alert('订阅成功！感谢你的关注');
        formRef.current.reset(); // 重置表单
      });

      // 订阅失败回调
      window.ml('on', 'error', error => {
        console.error('订阅失败:', error);
        alert('订阅失败，请检查邮箱格式或稍后重试');
      });
    };

    loadSDK();

    return () => {
      delete window.ml;
    };
  }, [ACCOUNT_ID]);

  return (
    <form ref={formRef} data-ml-form="你的表单ID" className="custom-subscribe-form">
      <input 
        type="email" 
        name="fields[email]" 
        placeholder="输入你的邮箱地址" 
        required 
        className="form-input"
      />
      <button type="submit" className="submit-btn">立即订阅</button>
    </form>
  );
};

export default CustomMailerLiteForm;

注意事项 #

• 如果你的项目有内容安全策略（CSP），需要把https://static.mailerlite.com加入允许加载的域名列表
• 本地开发环境可能出现表单加载异常，建议部署到线上环境测试，或者查看浏览器控制台的错误信息排查问题
• 如果使用SSR框架（比如Next.js），需要用typeof window !== 'undefined'判断环境，避免在服务器端执行浏览器专属代码

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