細說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。