React 函數組件傳遞ref

以前理所當然的認為，只要ref作為props傳進去，就可以直接給某個子組件用了，但是實際上不是這樣的

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}了