如何将父组件的 react hook 创建的引用传递给子组件？

Question

My Code:

const MyComponent: React.FC = () => {

const ParentReference = useRef(null);

return(
<Parent className="d-flex flex-row" ref={ParentReference}>
          <ChildComponent
            className="mr-3"
            target={ParentReference.current}
          />
          <AnotherChild className="mr-3" />
        </Nav>
)};

As seen in the code above, I have created a reference using useRef hook and attached it to my ParentComponent. Now am passing to ChildComponent by means of target prop and using it to do some dom manipulation inside the child.

Issue: I am getting ParentReference as null for the first render of the component. (If I force re-render on change of the ParentReference it will update and re-render whole component then it will have value.)

How to get the ParentReference inside my child Component for initial render itself?

Answer 1

segFault's reference to this answer is correct. Your ref it not initialized until after your component's first render. So when you render your <ChildComponent target={ParentReference.current} /> , the ref is not yet defined.

In this scenario you might consider using a useEffect to set a state variable on first render, and conditionally rendering the <ChildComponent /> once that state variable is set.

const MyComponent: React.FC = () => {

const ParentReference = useRef(null);

// define state variable defining the ref as not yet ready
const [refReady, setRefReady] = useState(false)
// On first mount, set the variable to true, as the ref is now available
useEffect( () => {
  setRefReady(true)
}, [])

return(
<Parent className="d-flex flex-row" ref={ParentReference}>
          {refReady && <ChildComponent
            className="mr-3"
            target={ParentReference.current}
          />}
          <AnotherChild className="mr-3" />
        </Nav>
)};