如何在React中将一个ref传递到多个级别

Question

我可以通过forwardRef:将<Parent />ref传递给<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 />再添加一个级别时，ref总是返回undefined。

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来做这件事，避免道具钻孔，但对于这个特定的例子，我宁愿选择道具钻孔。有什么提示吗？

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>
)
}