Ref在React中怎么交叉使用

这篇文章主要介绍“Ref在React中怎么交叉使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Ref在React中怎么交叉使用”文章能帮助大家解决问题。

一、首先说明下什么是Ref

Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧。对于大多数应用中的组件来说，这通常不是必需的。但其对某些组件，尤其是可重用的组件库是很有用的

二、ref在hooks中的用法

1、ref在hooks中HTMLDom的用法

这里就如官网一样正常使用即可，官网例子：这里

const Fn = ()=>{
    const testRef = useRef(null);
    console.log('testRef',testRef.current); // 会渲染两次，第一次打印null，第二次是<div>测试</div>
    return (
        <div ref={testRef}>测试</div>
    )
}

2、ref在hooks中与函数式组件的用法

这里只需要将ref属性透传到函数式组件中即可

const Fn = ()=>{
    const testRef = useRef(null);
    // 定义Test函数组件
    const Test = ({ refs }) => <div ref={refs}>我是ReactDOM test</div>;
    console.log('testRef',testRef.current); // 会渲染两次，第一次打印null，第二次是<div>我是ReactDOM test</div>
    return (
        {/* 这里之所以用refs而不用ref作为prop是因为ref会被react特殊处理，不会作为props透传到react组件中，类似于key */}
         <Test refs={testRef} /> 
    )
}

3、ref在hooks中与类组件一同使用

这里仅需要在类组件的回调ref中手动赋值给useRef对象即可，更多回调ref：这里

import ReactDom from 'react-dom';

const Fn = ()=>{
    const testClassRef = useRef(null);
    // 定义TestClass类组件
    class TestClass extends React.Component {
        render() {
          return (
            <div >
                我是TestClass类组件 测试
            </div>
          )
        }
    }
    console.log('testClassRef',testClassRef.current); // 会渲染两次，第一次打印null，第二次是<div>我是TestClass类组件 测试</div>
    return (
        {/* 这里之所以用refs而不用ref作为prop是因为ref会被react特殊处理，不会作为props透传到react组件中，类似于key */}
         <TestClass 
             ref={el => {
                console.log('new render refs')
                testClassRef.current = ReactDom.findDOMNode(el);
             }} 
         /> 
    )
}

4、ref在hooks中与class、react-redux一同使用

当遇到connect包裹的类组件时，因为最外层已经被包裹成了react-redux的Provider，所以需要将ref属性透传如真正React组件中，这个时候需要关注下connect的forwardRef属性

import ReactDom from 'react-dom';
import { connect } from 'react-redux';

const Fn = ()=>{
    const testClassRef = useRef(null);
    // 定义TestClass类组件
    class TestClass extends React.Component {
        render() {
          return (
            <div >
                我是TestClass类组件 测试
            </div>
          )
        }
    }
    //定义TestClass的connect包裹后的组件
    //forwardRef:true 设置redux允许将ref作为props传入到connect包裹的组件中
    const TestClassConnect = connect(null, null, null, { forwardRef: true })(TestClass);
    
    console.log('testClassRef',testClassRef.current); // 会渲染两次，第一次打印null，第二次是<div>我是TestClass类组件 测试</div>
    return (
        {/* 这里之所以用refs而不用ref作为prop是因为ref会被react特殊处理，不会作为props透传到react组件中，类似于key */}
         <TestClassConnect
            ref={el => {
              console.log('new render refs')
              testClassRef.current = ReactDom.findDOMNode(el);
            }}
          />
    )
}

关于“Ref在React中怎么交叉使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。