如何讀取子組件中的當前 React.useRef？

Question

我在父組件中有一個 React.useRef const portfolioRef = React.useRef(null)並且想在子組件const parent = portfolioRef.current中使用它的當前版本。 但是當我以這種方式使用它時，它說cannot read property of current 。 有誰知道如何解決這個問題？

export function Portfolio() {
  const portfolioRef = React.useRef(null)
  return (
    <div  className={cx(styles.component, styles.scrollWrapper)}>
      <div className={styles.topIcon} dangerouslySetInnerHTML={{ __html: arrow }} />
      <div ref={portfolioRef} className={styles.scroll}>
       <PortfolioItem
          title='Article about Kaliber Academie'
          text='I wrote an article about my experience at Kaliber'
          link='https://medium.com/kaliberinteractive/hoe-technologie-het-hart-van-een-luie-scholier-veranderde-3cd3795c6e33'
          linkTekst='See Article' />

       </div>
    </div>
  )
}

function PortfolioItem({ text, title, link, linkTekst, portfolioRef }) {
  const portfolioItemRef = React.useRef(null)

  React.useEffect(() => {
   const element = portfolioItemRef.current
   const parent = portfolioRef.current
   calculateDistance(parent, element)
   }, [portfolioRef])

  return (
    <div ref={portfolioItemRef} className={styles.componentItem}>
     <div className={styles.title}>{title}</div>
      <div className={styles.content}>
       <div className={styles.text}>{text}</div>
        <div className={styles.links}>
          <a className={styles.linkTekst} href={link}>{linkTekst} </a>
          <div className={styles.linkIcon} dangerouslySetInnerHTML={{ 
           __html:arrow }} />
         </div>
      </div>
    </div>
  )
}

function calculateDistance(parent, element) {
  const parentRect = parent.getBoundingClientRect()
  const parentCenter = parentRect.top + parentRect.height / 2
  const elementRect = element.getBoundingClientRect()
  const elementCenter = elementRect.top + elementRect.height / 2
  const distance = Math.abs(elementCenter - parentCenter)
  console.log(distance)
}

Answer 1

function PortfolioItem({ text, title, link, linkTekst, portfolioRef }) {
    const portfolioItemRef = React.useRef(null) //line 1

    const element = portfolioItemRef.current //line 2

    const parent = portfolioRef.current //line 3

    calculateDistance(parent, element)
    return (
        <div ref={portfolioItemRef} className={styles.componentItem}>
        </div>
    )
}

當代碼按順序執行時

• 第 1 行：創建一個引用來保存一個元素或值，方法是使用useRef nad 將其初始化到 null，
• 第 2 行：嘗試訪問仍然是null的 ref 的當前值 //錯誤，因為此時 ref 沒有保存任何值

要訪問值，您必須將邏輯放入 useRef

React.useEffect(() => {
    const element = portfolioItemRef.current
    const parent = portfolioRef.current
    calculateDistance(parent, element)
}, [])

未測試。

Answer 2

似乎您根本沒有將 ref 傳遞給孩子。 嘗試在道具中傳遞它

<PortfolioItem
  portfolioRef={portfolioRef} {/* here you are passing the ref in props */}
  title="Article about Kaliber Academie"
  text="I wrote an article about my experience at Kaliber"
  link="https://medium.com/kaliberinteractive/hoe-technologie-het-hart-van-een-luie-scholier-veranderde-3cd3795c6e33"
  linkTekst="See Article"
/>;