React中如何查找指定className的div并替换其内容？

在React中完全可以替换这个无法直接控制的.end-message div，核心思路是通过DOM操作定位到目标元素，再用自定义元素替换它，以下是具体实现方案：

基础实现（组件挂载后查找替换） #

如果.end-message div是在组件挂载后很快出现的，直接在组件生命周期钩子或useEffect中执行DOM替换：

函数组件版本 #

import { useEffect } from 'react';

function YourFormComponent() {
  useEffect(() => {
    // 定位目标div
    const hubSpotEndMsg = document.querySelector('.end-message');
    if (hubSpotEndMsg) {
      // 创建自定义div
      const customEndMsg = document.createElement('div');
      customEndMsg.className = 'custom-end-message';
      customEndMsg.innerHTML = '<h3>提交成功！</h3><p>我们会尽快与您取得联系</p>';
      
      // 替换原div
      hubSpotEndMsg.parentNode.replaceChild(customEndMsg, hubSpotEndMsg);
    }
  }, []);

  return (
    <div className="hubspot-form-wrapper">
      {/* HubSpot表单会渲染在此容器内 */}
    </div>
  );
}

类组件版本 #

class YourFormComponent extends React.Component {
  componentDidMount() {
    const hubSpotEndMsg = document.querySelector('.end-message');
    if (hubSpotEndMsg) {
      const customEndMsg = document.createElement('div');
      customEndMsg.className = 'custom-end-message';
      customEndMsg.textContent = '提交成功，感谢您的反馈！';
      
      hubSpotEndMsg.parentNode.replaceChild(customEndMsg, hubSpotEndMsg);
    }
  }

  render() {
    return (
      <div className="hubspot-form-wrapper">
        {/* HubSpot表单容器 */}
      </div>
    );
  }
}

进阶实现（监听DOM变化确保替换生效） #

如果.end-message是在表单提交后才动态生成的，上面的基础方案可能因为执行时机太早找不到元素，此时可以用MutationObserver监听DOM变化，确保元素出现后立即替换：

import { useEffect } from 'react';

function YourFormComponent() {
  useEffect(() => {
    const formWrapper = document.querySelector('.hubspot-form-wrapper');
    if (!formWrapper) return;

    // 创建DOM变化监听器
    const observer = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
        if (mutation.addedNodes.length) {
          const targetDiv = document.querySelector('.end-message');
          if (targetDiv) {
            // 生成自定义元素
            const customDiv = document.createElement('div');
            customDiv.className = 'custom-end-message';
            customDiv.innerHTML = '<p>已收到您的提交，稍后见！</p>';
            
            // 替换并停止监听
            targetDiv.parentNode.replaceChild(customDiv, targetDiv);
            observer.disconnect();
          }
        }
      });
    });

    // 监听表单容器的子元素变化
    observer.observe(formWrapper, { childList: true, subtree: true });

    // 组件卸载时清理监听器
    return () => observer.disconnect();
  }, []);

  return (
    <div className="hubspot-form-wrapper">
      {/* HubSpot表单 */}
    </div>
  );
}

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