React，如何訪問父級中的子級引用

Question

我正在嘗試訪問父母父母中的孩子 Ref，我似乎無法弄清楚，有誰知道我該如何實現這一點，

// Child
const RightMenu = ({t}) => {

  const juraLiveIconRef = useRef();

  return (
     <Row className="pt-4">
        <Col>
          <img
            ref={juraLiveIconRef}
            src={require("../../assets/jura-live-grey.png")}
          />
        </Col>
     </Row>
  )
}

 //Parent1
const BottomMenu = ({ t}) => {

   <div className="bottom-menu-right-menu">
      <RightMenu />
   </div>

}

 //Parent2
const Home = ({ t }) => {

   <div>
    <BottomMenu />
   </div>
}

我需要訪問 Home 組件（parent2）中的 ref，任何幫助將不勝感激。

Answer 1

將您的ref提升到Parent和 append 它在Child

const Parent = () =>{
    const ref = useRef(null)

    return <Child parentRef={ref} />
}

const Child = props => <GrandChild {...props}/>

const GrandChild = ({ parentRef }) => <div ref={parentRef} />

只要您不將其稱為ref ，您就可以像普通prop一樣傳遞ref