ForwardRef

- forwardReffks

伝達refは、要素を介してrefをそのサブアイテムの1つに自動的に伝達する方法である.
再利用可能な構成部品ライブラリなどの一部の構成部品に便利です.

function parent() {

    return (
        <div>
            <Children />
        </div>
    )
}

function Children() {
 const hnadleFunc = () =>{
  console.log("hello world")
 }
    return (
        <buntton>
            호로롱
        </buntton>
    )
}

サブボタンへのアクセス方法
私たちはよくrefを考えます.
このrefを親から子に渡す方法はforwardrefです.

使用

function parent() {
 const childRef = useRef
    return (
        <div>
            <Children ref={childRef} />
        </div>
    )
}
const Children = React.forwardRef((props,ref)=>{
const hnadleFunc = () =>{
  console.log("hello world")
 }
    return (
        <buntton ref={ref}>
            호로롱
        </buntton>
    )
})

さぎょう

の親からref

を作成

子

に移行

サブエレメントはReactです.ForwardRef()に

を作成

サブエントリの最初のパラメータはpropsであり、2番目のパラメータはrefであり、

である.

受信refをサブアセンブリのラベル

に接続する.

深化する

forwardRefを使用してサブエレメント内の関数を操作する

useImperativeHandleとForwardRefの使用

function parent() {
 const childRef = useRef
    return (
        <div>
            <Children ref={childRef} />
        <button onClick ={()=>{ref.current.handleFunc()}}
        </div>
    )
}
const Children = React.forwardRef((props,ref)=>{

  useImperativeHandle(ref, () => ({
      hnadleFunc() {
  console.log("hello world")
      },
    }));
    return (
        <buntton ref={ref}>
            호로롱
        </buntton>
    )
})

上記のように

を行う.

セグメントの親関数をuseImperativeHandle()関数で宣言

useImperativeHandleの最初のパラメータはrefで、2番目はコールバック関数

です.

の2番目のパラメータ関数で、親関数で実行する関数

を宣言します.

の親で関数

を実行します.