React之Refs&DOM

因为前两个月的新冠疫情公司的开工时间都有延迟，在家里待着蹭吃蹭喝逐渐忘记自己还是一个IT从业人员，复工之后才逐渐回神，想起自己还有博客。哈哈哈

最近开发时遇到了关于ref的使用，看了文档之后了解到refs的使用在16.3版本之后已经出现了变更，就此记录一下

16.3之后版本的Ref推荐用法(React.createRef())：

1.简单使用：

// 代码引入了typeScript
// 通过createRef使用  React16.3之后的推荐用法
export class RefCreate extends React.Component{
    
    // 泛型中的HTML类型需要根据对应的ref元素进行更改
    private btnRef:React.RefObject<HTMLButtonElement> = React.createRef();

    getRef = () => {
        console.log(this.btnRef);
    }

    render(){
        return (
            <>
                <button ref={this.btnRef}>最新的ref用法</button>
                <button onClick={this.getRef}>获取Ref</button>
            </>
        )
    }
}

2.父组件需要获取子组件中的Ref

// 代码使用了TypeScript
// 在父组件通过createRef()创建Ref，通过ref传递给子组件，子组件通过forwardRef()方法对ref进行转发，转发至对应的DOM
// 子组件
export const FancyButton = 
    React.forwardRef<HTMLButtonElement, PropsWithoutRef<ComponentProps<'button'>> & RefAttributes<HTMLButtonElement>>((props, ref) => {
    return <button ref={ref}>{props.children}</button>
})



// 父组件
class ParentRef extends React.Component<{},{}>{

    // 定义Ref
    private childRefs:React.RefObject<HTMLButtonElement> =  React.createRef();
    
    getChildRef = () => {
        console.log(this.childRefs.current);
    }
    
    render(){
        return (
            <>
                <FancyButton btnRef={this.childRefs} />
                <button onClick={this.getChildRef}>获取子组件ref</button>    
            </>
        )
    }
}

 这个里面值得一说的是关于forward转发的泛型，当时看了ts声明没有很明白，百度之后才知道对应泛型的类型(有点长)：

<HTMLButtonElement, PropsWithoutRef<ComponentProps<'button'>> & RefAttributes<HTMLButtonElement>>

16.3之前版本的Ref用法：

1.简单用法(字符串Ref)

// 字符串类型的ref 通过this.refs.XX调用  已经不再推荐使用
export default class RefsButton extends React.Component{
    constructor(props:any){
        super(props);
        this.state={
            
        }
    }

    getMyRefs = () => {
        console.log(this.refs.myBtn);
    }

    render(){
        return(
            <>
                <button ref="myBtn">字符串类型的ref</button>
                <button onClick={this.getMyRefs}>获取ref</button>
            </>
        )
    }
}

2.简单用法（回调函数的Ref）

扫描二维码关注公众号，回复： 9763341 查看本文章

// 通过Ref回调函数的形式使用

export class RefFunction extends React.Component{

    btnRef:HTMLButtonElement | null = null;

    setRef = (el:HTMLButtonElement) => {
        this.btnRef = el;
    }

    getRef = () => {
        console.log(this.btnRef);
    }

    render(){
        return (
            <>
                <button ref={this.setRef}>通过回调形式设置ref</button>
                <button onClick={this.getRef}>获取Ref</button>
            </>
        )
    }
}

3.父组件调用子组件的Ref

// 父组件获取子组件的ref ref通过回调获取 通过props传递

// 子组件
export class PropRef extends React.Component<{btnRef: (el:HTMLButtonElement) => any},{}>{
    constructor(props:any){
        super(props);
        this.state={

        }
    }

    render(){
        return(
            <>
                <button ref={this.props.btnRef}>子按钮</button>
            </>
        )
    }
}

// 父组件

class PropRef extends React.Component<{},{}>{
    constructor(props:any){
        super(props);
        this.state={

        }
    }

    private parentRef: HTMLButtonElement | null = null;

    getChildRef = () => {
        console.log(this.parentRef);
    }

    render(){
        return(
            <>
                <PropRef btnRef={el => this.parentRef = el} />
                <button onClick={this.getChildRef}>获取子组件ref</button>
            </>
        )
    }
}

暂时整理的ref使用方式大概就这些，希望对各位有所帮助

over