反应，如何在父级访问子引用

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）中的引用，我们将不胜感激。

Answer 1

将您的ref移至Parent并将其附加在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