本文只描述 React Hooks 函数组件之后的写法

单层组件

const Comp = () => {
    const nodeRef = React.useRef();
    console.log(nodeRef.current);
    
    return (
        <div ref={nodeRef} />
    )
}

父组件获取子组件ref

使用React.forwardRef(prop, ref)传递给子组件，使父组件有子组件节点的掌控权

const Sup = () => {
    const nodeRef = React.useRef();
    console.log(nodeRef.current);
    
    return (
        <Sub ref={nodeRef} />
    )
}

const Sub = React.forwardRef((prop, ref) => {
    return (
        <div ref={ref} />
    )
}

应用

那么拿到ref后，有哪些应用场景呢？举例如下：

• videoRef.current
  • play()
  • pause()
• inputRef.current
  • focus()
  • clearInputValue()
  • blur()
• nodeRef.current
  • offsetHeight
  • offsetTop
  • scrollTop
  • clientHeight
  • style
• iframeRef.current
  • contentWindow
  • contentDocument ...