React中Bootstrap Alert关闭后导航报错：节点非子节点问题

核心问题是Bootstrap原生关闭逻辑会直接删除DOM节点，而React虚拟DOM仍保留该节点引用，导航时React尝试操作已不存在的节点导致报错。以下是两种可行解决方案：

方案一：配置Bootstrap仅隐藏元素（不删除DOM） #

通过阻止Bootstrap默认的DOM删除行为，改用添加隐藏类的方式处理关闭：

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

const BootstrapAlert = ({ variant = 'info', dismissible = false, children }) => {
  const alertRef = useRef(null);

  useEffect(() => {
    if (!dismissible || !alertRef.current) return;
    
    const closeBtn = alertRef.current.querySelector('.btn-close');
    const handleClose = (e) => {
      // 阻止Bootstrap删除DOM的默认行为
      e.preventDefault();
      e.stopPropagation();
      // 用Bootstrap的d-none类隐藏元素
      alertRef.current.classList.add('d-none');
    };

    closeBtn.addEventListener('click', handleClose);
    return () => closeBtn.removeEventListener('click', handleClose);
  }, [dismissible]);

  return (
    <div
      ref={alertRef}
      className={`alert alert-${variant} ${dismissible ? 'alert-dismissible fade show' : ''}`}
      role="alert"
    >
      {children}
      {dismissible && (
        <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      )}
    </div>
  );
};

export default BootstrapAlert;

方案二：用React状态控制组件渲染（推荐） #

完全抛弃Bootstrap的原生关闭逻辑，由React状态控制Alert的显示/隐藏，确保虚拟DOM与真实DOM一致：

import React, { useState } from 'react';

const BootstrapAlert = ({ variant = 'info', dismissible = false, children }) => {
  const [isVisible, setIsVisible] = useState(true);

  // 组件不可见时直接返回null，从DOM中移除（由React控制）
  if (!isVisible) return null;

  return (
    <div
      className={`alert alert-${variant} ${dismissible ? 'alert-dismissible fade show' : ''}`}
      role="alert"
    >
      {children}
      {dismissible && (
        <button
          type="button"
          className="btn-close"
          onClick={() => setIsVisible(false)}
          aria-label="Close"
        ></button>
      )}
    </div>
  );
};

export default BootstrapAlert;

方案对比 #

• 方案一适合需要保留DOM节点（比如后续可能重新显示）的场景，但需手动处理事件以规避Bootstrap默认行为
• 方案二更贴合React的状态驱动渲染模式，完全由React掌控DOM，从根源避免虚拟DOM与真实DOM不匹配的问题，推荐优先使用

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