如何在不修改子组件源码的情况下判断子孙组件是否渲染Modal

针对你遇到的类组件场景——不能改子组件源码、没法用Hooks的情况，给你几个可行的解决办法：

1. 直接监听DOM变化（最通用） #

大部分UI库的Modal都会通过Portal渲染到body节点下，且有固定类名（比如AntD的ant-modal-root、ElementUI的el-modal__wrapper）。你可以用MutationObserver监听DOM变化，判断Modal是否存在：

class ParentComponent extends React.Component {
  componentDidMount() {
    // 配置观察器：监听子节点变化，包括后代节点
    const observerOptions = {
      childList: true,
      subtree: true
    };

    this.modalObserver = new MutationObserver(() => {
      // 替换成你项目中Modal的实际类名
      const modalExists = document.querySelector('.ant-modal-root') !== null;
      // 更新组件状态，后续可根据该状态做逻辑处理
      this.setState({ hasActiveModal: modalExists });
    });

    // 开始监听body节点
    this.modalObserver.observe(document.body, observerOptions);
  }

  componentWillUnmount() {
    // 组件销毁时必须断开观察器，避免内存泄漏
    this.modalObserver.disconnect();
  }

  render() {
    return (
      <div className="parent-container">
        <ChildComponentA />
        <ChildComponentB />
      </div>
    );
  }
}

这个方法不用关心React组件树结构，只要Modal的DOM存在就能检测到，兼容性也不错。

2. 用高阶组件+Context拦截Modal状态 #

如果Modal的显示由visible这类属性控制，你可以写个高阶组件（HOC）包裹子组件，递归遍历子节点找到Modal，监听它的visible属性，再通过Context把状态传给父组件：

// 创建Context用来传递Modal状态
const ModalStatusCtx = React.createContext({
  hasModal: false
});

// 封装HOC，用来包裹子组件
const withModalDetector = (WrappedComp) => {
  return class extends React.Component {
    state = { hasModal: false };

    // 递归遍历子节点，检查是否有Modal并监听visible
    checkModalNodes = (children) => {
      React.Children.forEach(children, child => {
        if (!React.isValidElement(child)) return;
        
        // 根据你用的Modal组件名称判断，比如AntD的Modal组件名就是'Modal'
        if (child.type.name === 'Modal') {
          if (child.props.visible !== this.state.hasModal) {
            this.setState({ hasModal: child.props.visible });
          }
        }

        // 继续检查子节点的子节点
        if (child.props.children) {
          this.checkModalNodes(child.props.children);
        }
      });
    };

    componentDidMount() {
      this.checkModalNodes(this.props.children);
    }

    componentDidUpdate() {
      this.checkModalNodes(this.props.children);
    }

    render() {
      return (
        <ModalStatusCtx.Provider value={{ hasModal: this.state.hasModal }}>
          <WrappedComp {...this.props} />
        </ModalStatusCtx.Provider>
      );
    }
  };
};

// 父组件中使用
class ParentComponent extends React.Component {
  static contextType = ModalStatusCtx;

  render() {
    // 直接从Context拿到Modal状态
    console.log('当前是否有Modal显示:', this.context.hasModal);
    return (
      <div>
        {/* 用HOC把各个子组件包起来 */}
        {withModalDetector(<ChildComponentA />)}
        {withModalDetector(<ChildComponentB />)}
      </div>
    );
  }
}

这个方法依赖Modal的组件名称和visible属性，需要根据你项目用的UI库调整判断条件，好处是能精准对应React组件的状态。

3. 监听全局事件（如果UI库支持） #

有些UI库会在Modal显示/隐藏时触发全局事件，比如自定义的modal-show、modal-hide，你可以直接监听这些事件：

class ParentComponent extends React.Component {
  state = { hasModal: false };

  componentDidMount() {
    document.addEventListener('modal-show', this.handleModalShow);
    document.addEventListener('modal-hide', this.handleModalHide);
  }

  componentWillUnmount() {
    document.removeEventListener('modal-show', this.handleModalShow);
    document.removeEventListener('modal-hide', this.handleModalHide);
  }

  handleModalShow = () => this.setState({ hasModal: true });
  handleModalHide = () => this.setState({ hasModal: false });

  render() {
    // 业务逻辑...
  }
}

如果你的UI库没提供这类事件，这个方法就用不了，优先考虑前两个方案。

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