【解决方案】【最佳实践】React高阶组件中Refs 不会被传递的问题

大家好，我是DX3906。

最近遇到React高阶组件中Refs 不会被传递的问题。

在这里总结一下解决方案和解决思路：主要是通过从内向外和从外向内2种思路来分析解决的。

目录

前言

解决方案一：React.forwardRef

解决方案二：使用props传递ref

结语

---

前言

        虽然高阶组件的约定是将所有 props 传递给被包装组件，但这对于 refs 并不适用。那是因为 ref 实际上并不是一个 prop - 就像 key 一样，它是由 React 专门处理的。如果将 ref 添加到 HOC 的返回组件中，则 ref 引用指向容器组件，而不是被包装组件。

        在React中，Ref是一个React对象，它用于访问DOM节点或组件实例。当你使用高阶组件封装组件时，被封装的组件的Ref可能不会被传递到高阶组件的外部。这是因为高阶组件创建了一个包装组件，它接收原始组件作为prop，并且通常会创建一个新的ref来引用它。

解决方案一：React.forwardRef

        解决这个问题的方法之一是使用React的React.forwardRef函数。forwardRef允许你将一个ref传递给子组件，这样即使组件被高阶组件封装，ref也能正确地传递到最底层的组件。

下面是一个使用React.forwardRef的示例：

import React, { forwardRef } from 'react';const EnhancedComponent = React.forwardRef((props, ref) => {// 将ref传递给被封装的组件return <WrappedComponent {...props} forwardedRef={ref} />;
});const WrappedComponent = forwardRef((props, forwardedRef) => {// 使用forwardedRef来访问DOM或组件实例return <div ref={forwardedRef}>...</div>;
});// 使用时，ref将被传递到WrappedComponent的div元素
const ref = React.createRef();
<EnhancedComponent ref={ref} />;

        在这个例子中，EnhancedComponent是一个高阶组件，它使用forwardRef来接收一个ref，并将其传递给WrappedComponent。WrappedComponent也使用forwardRef来接收这个ref，并将其应用到内部的DOM元素上。

        使用forwardRef可以确保无论组件被多少层高阶组件封装，ref都能正确地传递到最底层的组件。这使得你可以在需要的时候访问DOM节点或组件实例，而不受高阶组件的影响。

解决方案二：使用props传递ref

    第一步：我们把ref 添加到 HOC 的返回组件中，则 ref 引用指向容器组件，而不是被包装组件。

    第二步：在HOC 把被组装的组件的ref赋值给高阶组件外层的一个instance对象。然后使用第一步中的ref调用instance对象。

        具体案例如下：

function withSubscription(WrappedComponent, selectData) {return class extends React.Component {constructor(props) {super(props);this.state = {data: selectData(props) // 初始状态};this.instance;}componentDidMount() {// 订阅数据源const { subscribe } = this.props;subscribe(data => this.setState({ data }));}componentWillUnmount() {// 取消订阅const { unsubscribe } = this.props;unsubscribe();}render() {// 将数据和原始props传递给WrappedComponentreturn <WrappedComponent ref={(node)=>{this.instance = node}} {...this.props} />;}};
}

import React,{useEffect,useRef} from "react"
function WithShow(props) {let cusRef = useRef(null);useEffect(()=>{cusRef.current.instance.被包装组件的方法()})// 使用高阶组件const MyComponentWithData = withSubscription(MyComponent, props => {// 根据props选择数据return someDataSource.getData(props.id);});// 然后在你的应用中使用MyComponentWithDatareturn() {// 获取Hoc外层组件的refreturn <MyComponentWithData ref={cusRef} {...this.props} />;}};
}

结语

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~