详解Ref在React中的交叉用法

目录

一、首先说明下什么是Ref

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 *