2.4 组件设置ref需要forwardRef进行转发

一、组件设置ref需要forwardRef进行转发

1. 当组件日安家ref属性的时候，需要forwardRef进行转发，forwardRef让组件通过ref向父组件公开DOM节点

2. 即父组件想获取子组件的dom节点，需要通过forwardRef进行一次转发，不然不可以

3. 代码示例：

   import { useRef, forwardRef } from 'react'
   
   // 通过forwardRef转发，父组件才可以获取到子组件的ref
   const MyInput = forwardRef(function MyInput(props, ref) {
     return (
       <>
         <input type="text" ref={ref} />
       </>
     )
   })
   
   function App() {
     const ref = useRef()
   
     const handleClick = () => {
       // 获取焦点
       ref.current.focus()
       // 设置背景色
       ref.current.style.background = 'red'
     }
   
     return (
       <>
         <div>Default Template</div>
         <button onClick={handleClick}>按钮</button>
         <MyInput ref={ref} />
       </>
     )
   }
   
   export default App
   

   父组件获取子组件DOM并修改样式的方案