React中Ref的使用

❝

在React我们经常会写很多组件，一般父子之间交互基本上使用的是Props，但是在有些情况下还是会用到Ref，本文就来讲解一下ref的使用！

❞

注意本文的示例均为TSX!

创建子组件

在子组件中使用forwardRef暴露整个子组件实例

使用useImperativeHandle暴露方法，可在父组件中调用

import { forwardRef, useImperativeHandle } from "react";

export type ChildComponentPropsType = {
  title:string
}

const ChildComponent: React.FC<ChildComponentPropsType> = ({title},ref) => {
    
    const consoleLogTest = () => {
        console.log("test")
    }
    
    // 暴露的方法 父组件可调用
    useImperativeHandle(ref, () => ({
        consoleLogTest,
    }));


    return (
        <div>{title}</div>
    )
}


// forwardRef 暴露ref，父组件可获取当前实例
export default forwardRef(ChildComponent);

父组件调用

使用useRef定义子组件的ref

REF.current可获取子组件的实例，可调用起内部暴露的方法

import React,{ useRef } from "react";

import ChildComponent from "./ChildComponent"

export type ParentComponentPropsType = {
}

const ParentComponent: React.FC<ParentComponentPropsType> = () => {
    
    const ChildComponentRef = useRef<React.RefObject | null>(null);
    
    const consoleLogChildTest = () => {
        // 获取子组件实例并调用暴露的方法
        ChildComponentRef.current?.consoleLogTest()
    }


    return (
        <div>
            <div>
                <ChildComponent title="子组件" ref={ChildComponentRef}/>
                <button onClick={consoleLogChildTest}>调用子组件方法</button>
            </div>
        </div>
    )
}


export default ParentComponent;

我们经常需要父组件去调用子组件的方法，这在第三方组件库很常见。

虽然React官方不推荐这种方式，更倾向于Props单向数据流。

Vue中也经常使用Ref。

如果感觉有帮助，麻烦3连(关注、赞、在看)，谢谢! 后面会更新更多。

关注公众号了解更多