在功能組件中訪問父組件內的子組件 ref

Question

我有一個父子組件，看起來像這樣

export function Parent(){
  function handleClick(){
     // Here I need to access Child components ref, that may be taken to this function as a parameter
  }

  return(
    <>
      <h1> Parent component here </h1>
      <Child/>
      <button onClick={handleClick}>Get Ref</button> 
    </>
  )
}


export function Child(){
  const childRef = useRef("test")
  return(
    <h1> Child Component</h1>
  )
}

如何根據父組件中的按鈕單擊獲取在子組件內定義的 ref，以便在父組件內訪問？

Answer 1

您可以使用React.forwardRef來獲取父組件中的子引用。

export function Parent(){
  const childRef = useRef();

  function handleClick(){
     console.log(childRef.current);
  }

  return(
    <>
      <h1> Parent component here </h1>
      <Child ref={childRef} />
      <button onClick={handleClick}>Get Ref</button> 
    </>
  )
}


export default React.forwardRef((props, ref) => {
  return(
    <h1 ref={ref}>Child Component</h1>
  )
});

或者，如果你不喜歡使用React.forwardRef ，你也可以將 ref 作為 prop 傳遞。 但是在這種情況下你不能將它命名為ref 。

export function Parent(){
  const childRef = useRef();

  function handleClick(){
     console.log(childRef.current);
  }

  return(
    <>
      <h1> Parent component here </h1>
      <Child innerRef={childRef} />
      <button onClick={handleClick}>Get Ref</button> 
    </>
  )
}


export default function Child({ innerRef }) {
  return(
    <h1 ref={innerRef}>Child Component</h1>
  )
});

Answer 2

你能試試嗎？ 我將 function 作為道具傳遞給孩子，並在孩子渲染時在那里設置引用；

export function Parent(){
  function handleClick(value){
     var childRef = value;
  }

  return(
    <>
      <h1> Parent component here </h1>
      <Child handleClick={handleClick}/>
      <button onClick={handleClick}>Get Ref</button> 
    </>
  )
}


export function Child({handleClick}){
  const childRef = useRef("test")
  handleClick(childRef)
  return(
    <h1> Child Component</h1>
  )
}