Javascript 在componentWillUnmount后，React子组件丢失其父组件的ref

我得到了按钮组件，它有另一个子组件来显示工具提示。我将ref传递给

组件，在该组件中，我将事件侦听器附加到

mouseEnter

，将

mouseLeave

事件附加到我的按钮

<Button
    ref={this.buttonRef}
    type={this.props.type}
    className={this.props.className}
    disabled={this.props.operationIsActive || (this.props.enabled == undefined ? undefined : !this.props.enabled)}
    onClick={this.props.onClick}
    onSubmit={this.props.onSubmit}
    icon={this.props.icon}
>
    {this.props.children}
</Button>
<Tooltip domRef={this.buttonRef} text={this.props.tooltip} />

---

一切正常，但当在按钮上触发onClick事件时（例如，我得到的按钮只为某个组件设置了新状态，并且在该简单div被渲染之后），

componentWillUnmount

方法被触发，ref丢失，所以我无法在

工具提示

组件中删除这两个侦听器。是否可以在父级之前卸载子级，或者以任何其他方式修复此问题？

引用只是

{current:…}

对象。此配方的目的是在通过引用传递ref对象后，能够更新

current

属性

在上面的代码中，

是在

之前安装和卸载的。ref秘密更新当前

的能力在这里被滥用<代码>工具提示

已经依赖于引用包含对特定组件的引用。在

工具提示

的使用寿命期间，ref不会发生变化，因此它不应该依赖于瞬态ref。它应该是：

public componentDidMount() {
    super.componentDidMount();
    this.reference = this.props.domRef.current;
    if (this.reference) {
        this.reference.element.addEventListener("mouseenter", this.showTooltip);
        this.reference.element.addEventListener("mouseleave", this.hideTooltip);
    }
}

public componentWillUnmount() {
    if (this.reference) {
        dom.element.removeEventListener("mouseenter", this.showTooltip);
        dom.element.removeEventListener("mouseleave", this.hideTooltip);
    }
}

---

当我点击按钮时，点击会发生什么？不清楚为什么会触发componentWillUnmount。请提供@estus我添加了更详细的信息onClick事件的作用例如我不确定我得到了什么例如我得到了一个按钮，它只为一些组件设置了新的状态，然后简单的div将被呈现。是否呈现div而不是按钮和工具提示？

public componentDidMount() {
    super.componentDidMount();
    this.reference = this.props.domRef.current;
    if (this.reference) {
        this.reference.element.addEventListener("mouseenter", this.showTooltip);
        this.reference.element.addEventListener("mouseleave", this.hideTooltip);
    }
}

public componentWillUnmount() {
    if (this.reference) {
        dom.element.removeEventListener("mouseenter", this.showTooltip);
        dom.element.removeEventListener("mouseleave", this.hideTooltip);
    }
}