React 中 ref 的使用

官方文档传送门

• Refs & DOM
• useRef
• useImperativeHandle

在类组件中使用 ref

1. React.createRef

class App extends React.Component {

    constructor(props) {
        super(props);
        this.divRef = React.createRef();
    }

    componentDidMount() {
        console.log(this.divRef.current);
    }

    render() {
        return <div ref={this.divRef}>验证 createRef 的一个div标签</div>
    }
}

2. 回调函数使用 ref

class App extends React.Component {

    constructor(props) {
        super(props);
        this.divRef = React.createRef();
    }

    componentDidMount() {
        console.log(this.divRef);
    }

    render() {
        return <div ref={ref => { this.divRef = ref }}>验证 createRef (回调方式) 的一个div标签</div>
    }
}

注意： 以上方法不能在函数组件中使用，因为函数组件没有实例。

在函数组件中使用 ref

1. React.useRef

const UseRefComponent = () => {
    const divRef = React.useRef();
	
    React.useEffect(() => {
        console.log(divRef.current);
    }, []);
	
    return <div ref={divRef}>验证 useRef 的一个 div 标签</div>
}

2. React.forwardRef

export const App = () => {
    const divRef = React.useRef();
	
    React.useEffect(() => {
        console.log(divRef.current);
    }, []);
	
    return <ForwardRefComponent ref={divRef} />
}

export const ForwardRefComponent = React.forwardRef((props, ref) => {
    return <div ref={ref}>验证 forwardRef 的一个 div 标签</div>
})

3. React.useImperativeHandle

export const App = () => {
    const divRef = React.useRef();
	
    React.useEffect(() => {
        console.log(divRef.current.clog());
    }, []);
	
    return <ForwardRefComponent ref={divRef} />
}

export const ForwardRefComponent = React.forwardRef((props, ref) => {
    const divRef = React.useRef();
	
    React.useImperativeHandle(ref, () => ({
        clog: () => {
            console.log(divRef.current);
        }
    }));

    return <div ref={divRef}>验证 useImperativeHandle 的一个 div 标签</div>
})