细说react16新增forwardRef

react中forwardRef使用

先说一下ref

1.组件内使用ref，获取dom元素

import React,{Component} from 'react';
import ReactDOM,{render} from 'react-dom';
class Child extends Component{
    constructor(){
        super();
        this.myDiv = React.createRef();
    }
    componentDidMount(){
        console.log(this.myDiv.current);
    }
    render(){
        return (
            <div ref={this.myDiv}>ref获取的dom元素</div>
        )
    }
    
}
复制代码

2.ref作为子组件的属性，获取的是该子组件

import React,{Component} from 'react';
import ReactDOM,{render} from 'react-dom';
class Child extends Component{
    constructor(){
        super();
    }
    componentDidMount(){
    }
    render(){
        return (
            <div>子组件</div>
        )
    }
    
}
class Parent extends Component{
    constructor(){
        super();
        this.myChild = React.createRef();
    }
    componentDidMount(){
        console.log(this.myChild.current);//获取的是Child组件

    }
    render(){
        return <Child ref={this.myChild} />
    }
    
}
复制代码

3.上例中如果想获取子组件中的dom的话，可以做如下修改

import React,{Component} from 'react';
import ReactDOM,{render} from 'react-dom';
class Child extends Component{
    constructor(){
        super();
    }
    componentDidMount(){
    }
    render(){
        return (
            <div ref={this.props.myRef}>子组件</div>
        )
    }
    
}
class Parent extends Component{
    constructor(){
        super();
        this.myChild = React.createRef();
    }
    componentDidMount(){
        console.log(this.myChild.current);//获取的是Child组件

    }
    render(){
        return <Child myRef={this.myChild} />
    }
    
}
复制代码

进入正题forwardRef

1.现在进入正题说一下forwardRef，它是react16新增的方法，返回react组件。

import React,{Component} from 'react';
import ReactDOM,{render} from 'react-dom';
const Child = React.forwardRef((props,ref)=>{
    return (
        <div ref={ref}>{props.txt}</div>
    )
})

class Parent extends Component{
    constructor(){
        super();
        this.myChild = React.createRef();
    }
    componentDidMount(){
        console.log(this.myChild.current);//获取的是Child组件中的div元素

    }
    render(){
        return <Child ref={this.myChild} txt="parent props txt"/>
    }
    
}
复制代码

2.上例中是一个简单的使用。forwardRef在HOC中是使用

import React,{Component} from 'react';
import ReactDOM,{render} from 'react-dom';
const ref = React.createRef();
function logProps(WrappedComponent) {
    class LogProps extends React.Component {
      render() {
        const {forwardedRef, ...rest} = this.props;
        return <WrappedComponent ref={forwardedRef} {...rest} />;
      }
    }
  
    return React.forwardRef((props,ref)=>{
        return <LogProps forwardedRef={ref} {...props}/>
    });
}
class Child extends Component{
    constructor(){
        super();
    }
    render(){
        return <div>{this.props.txt}</div>
    }
}
const LogChild = logProps(Child); 
class Parent extends Component{
    constructor(){
        super();
    }
    componentDidMount(){
        console.log(ref); //获取Child组件 
    }
    render(){
        return <LogChild ref={ref} txt="parent props txt"/>
    }
}
复制代码

上面总结了几种获取dom元素和react组件的几种方法。

• 补充ref属性不能用在函数组件上，应为函数组件没有实例。
• 函数组件内部可以使用react.createRef()。
• ref属性支持回调函数的形式获取当前元素。更详细内容请参考官方文档。
• 本文参考了react官方文档[Forwarding Refs]https://reactjs.org/docs/forwarding-refs.html 和Refs and the DOM。