React子组件向父组件添加回调以关闭Tooltip组件的方法

Hey there! Let's figure out how to make clicking the parent component's div close your child Tooltip. First, a quick reminder about React's core idea: data flows downward, and events bubble upward. While you can directly tweak the parent's DOM from the child, it's not the most "React-native" way to do things. I'll show you two sets of solutions—one that follows React's recommended data flow, and another that directly manipulates the DOM (if you specifically need that approach).

方案一：遵循React数据流（推荐） #

This approach keeps everything aligned with React's patterns, making your code easier to maintain and debug.

方式1：把Tooltip状态提升到父组件 #

Instead of keeping the tooltip's visibility state in the child, move it up to the parent. The parent can then control when to show/hide the tooltip, and handle its own click event to close it.

import React from 'react';

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      isTooltipVisible: false
    };
    this.handleParentClick = this.handleParentClick.bind(this);
    this.handleChildTriggerClick = this.handleChildTriggerClick.bind(this);
  }

  // 点击父组件时关闭Tooltip
  handleParentClick() {
    this.setState({ isTooltipVisible: false });
  }

  // 点击子组件的触发区域时打开Tooltip
  handleChildTriggerClick() {
    this.setState({ isTooltipVisible: true });
  }

  render() {
    return (
      <div onClick={this.handleParentClick}>
        父组件内容：sdf adfa sfdsf saf a sfdsaf sfsf safdsa asdf safdsaf safdsafasdf asdf safdsafdsafsadf asdf asfsadfdsafdsaf ..............
        <Child 
          isTooltipVisible={this.state.isTooltipVisible}
          onTriggerClick={this.handleChildTriggerClick}
        />
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    return (
      <div onClick={(e) => {
        // 阻止事件冒泡，不然点击子组件会立刻触发父组件的关闭事件
        e.stopPropagation();
        this.props.onTriggerClick();
      }}>
        点击我打开Tooltip
        {this.props.isTooltipVisible && (
          <div>tooooooooooooooooltip text hererrrrrrrrrr</div>
        )}
      </div>
    );
  }
}

export default Parent;

方式2：子组件通过Ref给父组件添加点击事件 #

If you don't want to lift the state to the parent, you can pass a ref of the parent's div to the child, then add a click listener to it in the child's componentDidMount lifecycle. Just remember to clean up the listener when the child unmounts!

import React from 'react';

class Parent extends React.Component {
  constructor() {
    super();
    // 创建父组件div的Ref，传给子组件
    this.parentDivRef = React.createRef();
  }

  render() {
    return (
      <div ref={this.parentDivRef}>
        父组件内容：sdf adfa sfdsf saf a sfdsaf sfsf safdsa asdf safdsaf safdsafasdf asdf safdsafdsafsadf asdf asfsadfdsafdsaf ..............
        <Child parentDivRef={this.parentDivRef} />
      </div>
    );
  }
}

class Child extends React.Component {
  constructor() {
    super();
    this.state = {
      IsShownTooltip: false
    };
    this.childTriggerRef = React.createRef();
    this.handleParentClick = this.handleParentClick.bind(this);
    this.onClick = this.onClick.bind(this);
  }

  componentDidMount() {
    // 获取父组件的DOM元素，添加点击事件
    const parentDiv = this.props.parentDivRef.current;
    if (parentDiv) {
      parentDiv.addEventListener('click', this.handleParentClick);
    }
  }

  componentWillUnmount() {
    // 组件卸载时移除事件监听器，防止内存泄漏
    const parentDiv = this.props.parentDivRef.current;
    if (parentDiv) {
      parentDiv.removeEventListener('click', this.handleParentClick);
    }
  }

  handleParentClick(e) {
    // 只有点击的不是子组件区域时，才关闭Tooltip
    if (!this.childTriggerRef.current.contains(e.target)) {
      this.setState({ IsShownTooltip: false });
    }
  }

  onClick(e) {
    // 阻止冒泡，避免打开Tooltip的同时触发父组件的关闭事件
    e.stopPropagation();
    this.setState({ IsShownTooltip: true });
  }

  render() {
    return (
      <div 
        ref={this.childTriggerRef}
        onClick={this.onClick}
      >
        点击我打开Tooltip
        {this.state.IsShownTooltip && (
          <div>tooooooooooooooooltip text hererrrrrrrrrr</div>
        )}
      </div>
    );
  }
}

export default Parent;

方案二：直接操作父组件DOM（不推荐，但满足需求） #

If you really need to avoid using Refs or state lifting, you can traverse the DOM to find the parent div. Note: This is fragile—if your DOM structure changes later (like adding a wrapper around the parent div), this code will break.

import React from 'react';

class Parent extends React.Component {
  render() {
    return (
      <div>
        父组件内容：sdf adfa sfdsf saf a sfdsaf sfsf safdsa asdf safdsaf safdsafasdf asdf safdsafdsafsadf asdf asfsadfdsafdsaf ..............
        <Child />
      </div>
    );
  }
}

class Child extends React.Component {
  constructor() {
    super();
    this.state = {
      IsShownTooltip: false
    };
    this.childTriggerRef = React.createRef();
    this.handleParentClick = this.handleParentClick.bind(this);
    this.onClick = this.onClick.bind(this);
  }

  componentDidMount() {
    // 找到父组件的div（假设是子组件的直接父元素）
    const parentDiv = this.childTriggerRef.current.parentElement;
    if (parentDiv) {
      parentDiv.addEventListener('click', this.handleParentClick);
    }
  }

  componentWillUnmount() {
    const parentDiv = this.childTriggerRef.current.parentElement;
    if (parentDiv) {
      parentDiv.removeEventListener('click', this.handleParentClick);
    }
  }

  handleParentClick(e) {
    if (!this.childTriggerRef.current.contains(e.target)) {
      this.setState({ IsShownTooltip: false });
    }
  }

  onClick(e) {
    e.stopPropagation();
    this.setState({ IsShownTooltip: true });
  }

  render() {
    return (
      <div 
        ref={this.childTriggerRef}
        onClick={this.onClick}
      >
        点击我打开Tooltip
        {this.state.IsShownTooltip && (
          <div>tooooooooooooooooltip text hererrrrrrrrrr</div>
        )}
      </div>
    );
  }
}

export default Parent;

重要注意事项 #

• 阻止事件冒泡：When you click the child to open the tooltip, you need to stop the event from bubbling up to the parent—otherwise, the parent's click event will fire immediately and close the tooltip right away.
• 清理事件监听器：Always remove event listeners in componentWillUnmount to prevent memory leaks.
• DOM结构依赖：直接操作DOM的方式依赖于固定的DOM层级，一旦结构变化就会失效，所以优先选择遵循React数据流的方案。

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