javascript - 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 并将其附加到 Child 中

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

    return <Child parentRef={ref} />
}

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

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

你可以像普通的 prop 一样传递一个 ref 只要你不调用它 ref