javascript - Reactjs - 高阶组件/findDOMNode 无法正常工作

Question

我创建了一个 HOC 来监听其包装组件外部的点击，以便包装组件可以根据需要进行监听和 react 。

HOC 看起来像这样:

const addOutsideClickListener = (WrappedComponent) => {

    class wrapperComponent extends React.Component {

        constructor() {
            super();
            this._handleClickOutside.bind(this);
        }

        componentDidMount() {
            document.addEventListener('click', this._handleClickOutside, true);
        }

        componentWillUnmount() {
            document.removeEventListener('click', this._handleClickOutside, true);
        }

        _handleClickOutside(e) {

            // 'this' here refers to document ???
            const domNode = ReactDOM.findDOMNode(this);

            if ((!domNode || !domNode.contains(e.target))) {

                this.wrapped.handleClickOutside();
            }
        }

        render() {

            return (
                <WrappedComponent
                    ref={(wrapped) => { this.wrapped = wrapped }}
                    {...this.props}
                />
            );
        }
    }

    return wrapperComponent;
}

每当我单击任意位置时，我都会在 _handleOutsideClick 回调中收到错误“未捕获错误:元素似乎既不是 ReactComponent 也不是 DOMNode”。

有什么想法可能导致这种情况吗？

<小时/>

更新:

好的，错误的根源是 _handleClickOutside 中的“this”现在引用“document”，这是预期的 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_value_of_this_within_the_handler

这看起来绝对是一团糟 - 似乎我可以正确绑定(bind)事件但无法取消绑定(bind)它，或者我可以正确取消绑定(bind)它但绑定(bind)方法会抛出错误...

Answer 1

尝试使用这个 -

constructor() {
        super();
        this._handleClickOutsideRef = this._handleClickOutside.bind(this);
    }

    componentDidMount() {
        document.addEventListener('click', this._handleClickOutsideRef, true);
    }

    componentWillUnmount() {
        document.removeEventListener('click', this._handleClickOutsideRef, true);
    }