2.3 useRef可通过ref操作DOM

一、useRef通过ref操作DOM

1. 由于React会自动处理更新DOM以匹配你的渲染输出，因此你在组件中通常不需要操作DOM。但有时需要访问由Rect管理的DOM元素，如：让一个节点获得焦点、滚动倒塌或测量他的尺寸和位置

   import { useRef } from 'react'
   
   function App() {
     const myRef = useRef(null)
     const handleClick = () => {
       // 通过ref操作原生DOM
       console.log(myRef.current.innerHTML)
       myRef.current.style.background = 'red'
     }
   
     return (
       <>
         <div>Default Template</div>
         <button onClick={handleClick}>按钮</button>
         <div ref={myRef}> demo ref</div>
       </>
     )
   }
   
   export default App
   

2. 在循环中操作ref可以使用回调函数写法

   function App() {
     const list = [
       { id: 1, text: '111' },
       { id: 2, text: '222' },
       { id: 3, text: '333' },
     ]
   
     return (
       <>
         <div>Default Template</div>
         <ul>
           {list.map((item) => {
             return (
               <li
                 key={item.id}
                 ref={(myRef) => {
                   myRef.style.background = 'red'
                 }}
               >
                 {item.text}
               </li>
             )
           })}
         </ul>
       </>
     )
   }
   
   export default App
   

   回调写法，不用声明，在原生DOM中操作