如何在注入的Microsoft Dynamics 365表单中正确添加React元素？

我们正逐步淘汰网站上基于React开发的自定义表单，替换为Microsoft Dynamics 365生成的表单。这些表单通过脚本创建的React占位符组件注入DOM，代码如下：

React.createElement(d365mktforms.FormPlaceholder, {
            formId: '14299349-****-****-****-*******cde50335',
            formApiBaseUrl: 'https://public-apj.mkt.dynamics.com/api/v1.0/orgs/****c3d6-****-****-a87b-5f737234ce93/landingpageforms',
            formUrl: 'https://assets-apj.mkt.dynamics.com/****3d6-****-****-a87b-5f737234****/digitalassets/forms/1429****-****-****-8847-000d3aa0****',
        }, 'contactForm')

我们希望保留原有自定义表单的验证逻辑与样式，包括给所有邮箱字段添加事件监听器、调用API验证，以及在字段下方显示验证提示标签（此类标签在Dynamics 365生成的表单中不存在）。目前可通过原生JS操作DOM实现，但不符合React设计理念，请问是否有正确的方式创建并添加React元素到注入的HTML中？

1. 利用React Portal挂载自定义验证组件 #

React Portal允许将组件渲染到DOM树任意位置，完美适配第三方注入DOM的场景：

• 先封装自定义验证组件（如EmailValidationTooltip），内置API验证逻辑和样式；
• 等待Dynamics 365表单渲染完成后，定位到邮箱字段的DOM元素；
• 通过ReactDOM.createPortal将验证组件挂载到邮箱字段的父节点内，放在字段下方位置。

示例代码：

// 自定义邮箱验证提示组件
const EmailValidationTooltip = ({ email }) => {
  const [errorMsg, setErrorMsg] = React.useState('');

  const validateEmail = async () => {
    // 调用API执行邮箱验证
    const response = await fetch('/api/validate-email', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email })
    });
    const result = await response.json();
    setErrorMsg(result.isValid ? '' : result.errorMessage);
  };

  React.useEffect(() => {
    if (email.trim()) validateEmail();
  }, [email]);

  return errorMsg ? <div className="validation-error-text">{errorMsg}</div> : null;
};

// 挂载验证组件到Dynamics表单的逻辑
const attachValidationToEmailField = () => {
  const emailField = document.querySelector('[data-field-type="email"]'); // 替换为实际字段选择器
  if (!emailField?.parentElement) return;

  // 创建容器用于挂载Portal
  const tooltipContainer = document.createElement('div');
  emailField.parentElement.appendChild(tooltipContainer);

  // 初始渲染验证组件
  ReactDOM.createPortal(
    <EmailValidationTooltip email={emailField.value} />,
    tooltipContainer
  );

  // 监听字段输入，同步更新验证状态
  emailField.addEventListener('input', (e) => {
    ReactDOM.render(
      <EmailValidationTooltip email={e.target.value} />,
      tooltipContainer
    );
  });
};

// 通过MutationObserver监听表单渲染完成
const formObserver = new MutationObserver((mutations) => {
  const hasEmailField = document.querySelector('[data-field-type="email"]');
  if (hasEmailField) {
    attachValidationToEmailField();
    formObserver.disconnect();
  }
});

formObserver.observe(document.body, { childList: true, subtree: true });

2. 用高阶组件（HOC）包裹FormPlaceholder #

如果能修改FormPlaceholder的调用逻辑，可以用HOC封装它，在内部处理表单渲染后的验证逻辑：

• 创建HOCwithEmailValidation，接收FormPlaceholder作为参数；
• 在HOC内部通过useEffect监听表单加载完成，再通过Portal挂载验证组件；
• 替换原React.createElement调用，使用封装后的组件。

示例代码：

const withEmailValidation = (WrappedComponent) => {
  return (props) => {
    React.useEffect(() => {
      const setupValidation = () => {
        const emailField = document.querySelector('[data-field-type="email"]');
        if (!emailField?.parentElement) return;

        const tooltipContainer = document.createElement('div');
        emailField.parentElement.appendChild(tooltipContainer);

        ReactDOM.createPortal(
          <EmailValidationTooltip email={emailField.value} />,
          tooltipContainer
        );

        emailField.addEventListener('input', (e) => {
          ReactDOM.render(
            <EmailValidationTooltip email={e.target.value} />,
            tooltipContainer
          );
        });
      };

      const observer = new MutationObserver(() => {
        if (document.querySelector('[data-field-type="email"]')) {
          setupValidation();
          observer.disconnect();
        }
      });
      observer.observe(document.body, { childList: true, subtree: true });
    }, []);

    return <WrappedComponent {...props} />;
  };
};

// 生成增强版占位符组件
const EnhancedFormPlaceholder = withEmailValidation(d365mktforms.FormPlaceholder);

// 替换原创建代码
React.createElement(EnhancedFormPlaceholder, {
  formId: '14299349-****-****-****-*******cde50335',
  formApiBaseUrl: 'https://public-apj.mkt.dynamics.com/api/v1.0/orgs/****c3d6-****-****-a87b-5f737234ce93/landingpageforms',
  formUrl: 'https://assets-apj.mkt.dynamics.com/****3d6-****-****-a87b-5f737234****/digitalassets/forms/1429****-****-****-8847-000d3aa0****',
}, 'contactForm');

3. 优先使用Dynamics 365官方事件钩子 #

如果Dynamics 365提供表单渲染完成的回调事件，优先用官方钩子替代MutationObserver，稳定性更高：

• 查阅Dynamics 365表单文档，找到类似onFormLoaded的官方事件；
• 在该事件回调中执行验证组件挂载逻辑，避免DOM监听的不确定性。

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