Question

我有一个按钮组件，它有另一个子组件来显示工具提示。我将ref传递到<Tooltip>组件，将事件侦听器附加到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} />

这是我的Tooltip组件

export class Tooltip extends ComponentBase<TooltipProps, TooltipState> {
private documentRef = null;

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

public componentWillUnmount() {
    if (this.documentRef) {
        const dom = this.documentRef.current;
        if (dom) {
            dom.element.removeEventListener("mouseenter", this.showTooltip);
            dom.element.removeEventListener("mouseleave", this.hideTooltip);
        }
    }
}

private showTooltip = (): void => {
    this.updateState({ isTooltipVisible: true })
}

private hideTooltip = (): void => {
    this.updateState({ isTooltipVisible: false })
}

private getStyles(position: any): React.CSSProperties {
    const css: React.CSSProperties = {
        left: position[0].left,
        top: position[0].top + 40,
    }
    return css;
}

public render() {
    if (!this.props.domRef.current) {
        return null;
    }
    if(!this.state.isTooltipVisible)
    {
        return null;
    }
    const position = this.props.domRef.current.element.getClientRects();
    const css = this.getStyles(position);
    return ReactDOM.createPortal(<div style={css} className="tooltip">{this.props.text}</div>, document.getElementById(DomRoot) )
}
}

一切正常，但是在按钮上触发onClick事件时（例如，我得到的按钮仅将新状态设置为某个组件，然后将呈现该简单的div），将触发componentWillUnmount方法，并且ref是丢失了，所以我无法在Tooltip组件中删除这两个侦听器。是否可以在父母面前卸下孩子或以其他方式解决此问题？

Answer 1

ref只是{ current: ... }对象。此食谱的目的是在通过引用传递ref对象之后能够更新current属性。

在<Button>上方的代码中，<Tooltip>之前已安装和卸载。此处引用滥用了秘密更新current的功能。 Tooltip已经依靠引用包含对特定组件的引用。预计ref不会在Tooltip的使用期限内发生变化，因此不应依赖于瞬态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);
    }
}

React子组件在componentWillUnmount之后丢失其父代的引用

1 个答案: