React函数组件useEffect在类组件中的等价实现：点击外部关闭组件

你提供的函数组件逻辑，核心是通过监听全局鼠标点击事件，判断点击目标是否在组件内部，从而执行关闭操作。对应到类组件中，可以通过以下方式实现：

实现步骤 #

• 1. 创建组件的ref引用，用于获取目标DOM元素
• 2. 在组件挂载完成后，给document添加mousedown事件监听
• 3. 在组件卸载前移除事件监听，避免内存泄漏
• 4. 编写点击事件处理函数，判断点击目标是否在组件外部，执行关闭逻辑

完整代码示例 #

import React from 'react';

class PanelComponent extends React.Component {
  constructor(props) {
    super(props);
    // 创建ref关联组件DOM
    this.panelRef = React.createRef();
  }

  componentDidMount() {
    // 组件挂载后绑定全局点击监听
    document.addEventListener('mousedown', this.handleClickOutside);
  }

  componentWillUnmount() {
    // 组件卸载前移除监听，防止内存泄漏
    document.removeEventListener('mousedown', this.handleClickOutside);
  }

  handleClickOutside = (event) => {
    // 校验点击目标是否不在组件内部
    if (this.panelRef.current && !this.panelRef.current.contains(event.target)) {
      // 替换为你的关闭组件逻辑，比如修改state隐藏组件
      console.log('点击了组件外部，执行关闭操作');
      // 示例：this.setState({ isPanelOpen: false });
    }
  };

  render() {
    return (
      <div ref={this.panelRef}>
        {/* 这里是你的组件内容 */}
        点击外部可关闭的组件
      </div>
    );
  }
}

export default PanelComponent;

关键说明 #

• 用React.createRef()创建ref，并在render阶段绑定到目标DOM元素
• 事件监听的添加与移除必须成对执行，避免组件卸载后残留监听导致异常
• 用箭头函数定义事件处理函数，确保this指向当前组件实例，无需额外手动绑定

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