如何在 React 中將 ref 向下傳遞多個級別？

Question

我可以通過forwardRef將<Parent />引用傳遞給<Children /> ：

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

  return <div ref={ref}>{props.children}</div>
})

export default function App() {
  const ref = useRef()

  console.log('ref', ref)
  return (
    <Children ref={ref}>I'm a child</Children>
  );
}

但是，當我向<GrandChildren />添加一個級別時，參考返回始終未定義。

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

  return <div ref={ref}>{props.children}</div>
})

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

  return <div><GrandChildren ref={ref} /></div>
})

export default function App() {
  const ref = useRef()

  console.log('ref', ref)
  return (
    <Children ref={ref}>I'm a child</Children>
  );
}

我知道我們可以使用 Context 執行此操作並避免道具鑽孔，但對於這個特定示例，我寧願 go 用於道具鑽孔。 任何提示？

Answer 1

您擁有的一種選擇是將 ref 作為道具名稱而不是ref傳遞。 例如：

import { useRef, forwardRef } from "react"

const GrandChildren = forwardRef((props, ref) => {
    return <div ref={ref}>{props.children}</div>
})

const Children = (props) => {
    return (
        <div>
            {props.children}
            <GrandChildren ref={props.grandchildenRef}>
                I'm a grandchild
            </GrandChildren>
        </div>
    )
}

export default function App() {
    const ref = useRef()
    const handleClick = () => {
        console.log("ref", ref)
    }

    return (
        <div onClick={handleClick}>
            <Children grandchildenRef={ref}>I'm a child</Children>
        </div>
    )
}