react ref传递

使用场景

用于获取到子组件中的某元素的ref。比如子组件中的表单元素。

const Test = ({ref}) => {
    return <div ref={ref}>
        <p>hahahha</p>
    </div>
}

class TestWarper extends React.Component {
    ref = React.createRef();
    render() {
        return <Test ref={this.ref} />
    }
}
// 上面这种情况下，this.ref永远是{current: null}，在Test子组件也发现，传进来的ref是undefined

面对这种情况，React有个方法，可以支持Ref的传递：forwardRef

import React, {forwardRef} from 'react';

// 包一层forwardRef
const Test = forwardRef((props, ref:any) => {
    return <div ref={ref}>
        <p>hahahha</p>
    </div>
})

class TestWarper extends React.Component {
    ref = React.createRef();
    render() {
        return <Test ref={this.ref} />
    }
}
// 这种情况下，this.ref就会是{current: div}了