注释从这开始~
总览
当咱们试图在其对应的DOM元素被渲染之前拜访其current属性时，React的ref通常会返回undefined或者null。为了解决该问题，能够在useEffect钩子中拜访ref，或者当事件触发时再拜访ref。
import {useRef, useEffect} from 'react';export default function App() { const ref = useRef(); console.log(ref.current); // ️ undefined here useEffect(() => { const el2 = ref.current; console.log(el2); // ️ element here }, []); return ( <div> <div ref={ref}> <h2>Hello</h2> </div> </div> );}useEffect
useRef()钩子能够传递一个初始值作为参数。该钩子返回一个可变的ref对象，ref对象上的current属性被初始化为传递的参数。
咱们没有为useRef传递初始值，因而其current属性设置为undefined。如果咱们将null传递给钩子，如果立刻拜访其current属性，将会失去null。
须要留神的是，咱们必须拜访ref对象上的current属性，以此来拜访设置了ref属性的div元素。
当咱们为元素传递ref属性时，比如说，<div ref={myRef} /> ，React将ref对象的.current属性设置为相应的DOM节点。
咱们应用useEffect钩子，是因为咱们想要确保ref曾经设置在元素上，并且元素曾经渲染到DOM上。
如果咱们尝试在组件中间接拜访ref上的current属性，咱们会失去undefined，是因为 ref 还没有被设置，而且 div 元素还没有被渲染。
事件
你也能够在事件处理函数中拜访ref的current属性。
import {useRef, useEffect} from 'react';export default function App() { const ref = useRef(); console.log(ref.current); // ️ undefined here useEffect(() => { const el2 = ref.current; console.log(el2); // ️ element here }, []); const handleClick = () => { console.log(ref.current); // ️ element here }; return ( <div> <div ref={ref}> <h2>Hello</h2> </div> <button onClick={handleClick}>Click</button> </div> );}当用户点击按钮的时候，ref曾经被设置好了，相应的元素曾经被渲染到DOM中，所以咱们可能拜访它。
总结
能够在useEffect钩子中拜访ref，或者当事件触发时再拜访ref。也就是说，要确保元素曾经渲染到DOM上。