gpt4 book ai didi

reactjs - 如何在 HOC 中使用 refs?

转载 作者:行者123 更新时间:2023-12-04 01:51:34 26 4
gpt4 key购买 nike

我有一个组件(用 HOC 包装),它被安装在我的应用程序的几个地方。我必须添加一些自定义事件,例如 dragdragLeave 等。使用 ComponentDidMount 中的 node.addEventListener 和需要在 ComponentWillUnmount 中删除它们。我尝试将 ref 提供给 HOC(它安装 WrapperComponent 的地方),但它给了我一个错误,即 node.addEventListener 不是一个函数,因为它给我一个组件的实例,而不是这个的 DOM 节点HOC。如何使用 refs 解决这个问题?

这是我的 HOC 的样子:

export default function Connector() {
return function wrap(WrappedComponent) {
class MyComponent extends PureComponent {
componentDidMount(){
//find node here and attach event listener
}
componentWillUnmount(){
//remove event listener
}
....
render() {
<WrappedComponent
{...this.props}
/>
}
}
}
}

编辑我不想在这里使用 ReactDOM.findDOMNode

最佳答案

为 WrappedComponent 添加一个 ref,然后找到 DOM 实例

export default function Connector() {
return function wrap(WrappedComponent) {
class MyComponent extends PureComponent {
componentDidMount(){
//find node here and attach event listener
this.node = ReactDOM.findDOMNode(this.componentRef);

}
componentWillUnmount(){
//remove event listener
}

....
render() {
<WrappedComponent
{...this.props}
ref={(ref) => this.componentRef = ref}
/>
}
}
}
}

另一种方法是将 innerRef 传递给 WrappedComponent 并将其留给 wrappedComponent 以将 ref 传递给 DOM 节点

   <WrappedComponent 
{...this.props}
innerRef={(ref) => this.componentRef = ref}
/>

然后在 WrappedComponent 中

 render() {
return (
<div ref={this.props.innerRef}>{/* */}</div>
)
}

关于reactjs - 如何在 HOC 中使用 refs?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52775830/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com