React基础之 forwardRef

使用场景：通过ref获取子组件内部input元素使其聚焦

如果父组件需要操作子组件的Dom，可以使用forwordRef来实现。通过父组件传递一个ref对象，子组件接收到这个对象之后与内部的ref先绑定，此时，父组件就能操作子组件的Dom了

import { forwardRef, memo, useCallback, useMemo, useReducer, useRef, useState } from "react";

const Son=forwardRef((props,ref)=>{

  return <input type="text" ref={ref}></input>

})

function App() {

  //传给子组件的函数

  const sonRef=useRef(null)

  const showRef=()=>{

    console.log(sonRef);

    sonRef.current.focus()

  }

  return (

    <div className="App">

        <Son ref={sonRef}/>

        <button onClick={showRef}>focus</button>

    </div>

  );

}

export default App;