代码之家 › 专栏 › 技术社区 › Ajay Gaur

如何在react中对HOC使用refs?

higher-order-components ref reactjs

Ajay Gaur · 技术社区 · 7 年前

我有一个组件(用HOC包装),它被安装在我的应用程序的几个地方。我必须添加一些自定义事件,例如 drag , dragLeave 等使用 node.addEventListener 在里面 ComponentDidMount ComponentWillUnmount node.addEventListener refs ?

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 在这里

1 回复 | 直到 7 年前

Amree 6 年前

向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}
               />
            }
        }
    }
}

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

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

然后在WrappedComponent中

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

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

8 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

8 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

8 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

8 月前

Luckkks · 过渡色工作不正常

8 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

8 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

8 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

8 月前

noblerare · Vite错误-未定义导出(SSR)

8 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

8 月前