Question

我正在通过上下文API将ref传递给组件：

render = () => (
    <MyContext.Consumer>
        { wrapper => (
            <RowContent
                wrapper={ wrapper }
                { ...this.props }
            />
        )}
    </MyContext.Consumer>
);

提供者代码如下：

wrapperRef: { current: HTMLInputElement, } = React.createRef();

<div
    ref={ this.wrapperRef }
    className="overflow-auto"
>

    <MyContext.Provider value={ this.wrapperRef }>
        { children }
    </MyContext.Provider>

...

我想像这样向此引用添加事件侦听器：

this.props.wrapper.current.addEventListener('scroll', debounce(event => this.handleScroll(event), 500));

我尝试将这行代码添加到ComponentDidMount组件的RowContent中，但是this.props.wrapper.current始终在undefined那里。

我尝试改用componentDidUpdate，但是我认为它错过了this.props.wrapper.current的初始设置，因为this.props.wrapper和prevProps的值始终为{{ 1}}。因此，在那种情况下，我永远不会获得prop的当前值和先前值之间的差异。

在这种情况下，还有其他生命周期方法吗？还是有比使用生命周期方法更好的方法来设置此事件侦听器？

何时将事件侦听器附加到通过props传递的ref

0 个答案: