React16:新Ref的使用

React16:新Ref的使用方式及Ref传递

Posted by wang chong on April 14, 2019

曾经的两种Ref的创建方式

render(){
    return (
        <>
            //第一种:第一种是指定指定一个string,通过this.refs.stringRef取到相应的dom元素
            <p ref="stringRef">span1</p>
            //第二种:第二种是使用箭头函数的方式把dom元素挂在到类的实例属性上,
            <p ref={ele=> (this.methodRef = ele)}>span2</p>
        </>
    )
}

新Ref的创建方式–React.createRef()

react16中的ref创建采用React的createRef()方法构建,创建一个ref,react内部采用每一个ref创建即创建一个Symbol,目的是为了所有的ref不重复。

import React, {Component} from "react";

class Greeting extends Component {
    constructor(props){
        super(props);
        this.objRef = React.createRef();
    }
    render(){
        return (
            <p ref={this.objRef}></p>
        )
    }
}

创建的this.objRef是一个对象,对象中只有一个属性currentcurrent属性就是ref所值的Dom元素。

React.forwardRef

forwardRef是一个高阶组件,参数传递一个函数组件,并返回一个组件,函数组件中有两个参数,props和ref,ref就是父组件传递过来的ref,把返回的组件在父组件中使用。

forwardRef可以让ref进行传递,向其他的组件传递。让ref更好的复用。传递方式为:由父组件创建ref,再把ref传递给子组件,方便父组件使用子组件的DOM元素和更好的管理ref。

import React, {forwardRef} from "react";

const TargetComponent = forwardRef((props,ref) => (
    <input type="text" ref={ref}/>
))

export default class Comp extends React.Component {
    constructor(props){
        super(props);
        this.ref = React.createRef();
    }
    componentDidMount(){
        this.ref.current.value = "父组件向子组件转发ref成功";
    }
    render(){
        return <TargetComponent ref={this.ref} />
    }
}