Javascript 如何读取子组件中当前的React.useRef？

我在父组件

const-portfolioRef=React.useRef（null）

中有一个React.useRef，我想在子组件

const-parent=portfolioRef.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)
}

导出功能组合（）{
const portfolioRef=React.useRef（null）
返回(
)
}
函数PortfolioItem（{text，title，link，linkTekst，portfolioRef}）{
const portfolioItemRef=React.useRef（null）
React.useffect（（）=>{
常量元素=portfolioItemRef.current
const parent=portfolioRef.current
CalculateInstance（父级、元素）
}，[portfolioRef]）
返回(
{title}
{text}
)
}
函数CalculateInstance（父级，元素）{
const parentRect=parent.getBoundingClientRect（）
常量parentCenter=parentRect.top+parentRect.height/2
常量elementRect=element.getBoundingClientRect（）
常量elementCenter=elementRect.top+elementRect.height/2
常量距离=Math.abs（elementCenter-parentCenter）
控制台日志（距离）
}

没有测试

---

未测试。

您似乎根本没有将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"
/>;

；

您似乎根本没有将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"
/>;

；

看不到PortfolioItem在父级中呈现Portfolio@ShubhamKhatri添加到代码中的父ref即使作为道具传递给子对象，在第一次渲染时也无法在子对象中访问，因为此时父对象中未初始化该ref。您是否可以在计算距离中显示您试图实现的目标，以便建议一个备选方案？看不到PortfolioItem在父对象中呈现Portfolio@ShubhamKhatri将父引用添加到代码中，即使您作为道具传递给子引用，也无法在第一次渲染中的子引用中访问父引用，因为此时引用未初始化在父母身上。您是否可以说明您在计算距离方面试图实现的目标，以便可以建议一个替代方案，您是指useRef还是useffect？您是否还知道一个解决方案，可以使用div上的

onScroll

事件上的

calculateInstance

函数和

className scroll

？附加一个滚动事件列表器并调用函数是的，我知道，但是变量的useffect在child中。因此，当我在父对象中调用函数

calculateInstance

时，它无法到达子对象中的变量。那么，将useEffect移动到父对象是否更好？我更新了该文件，以便您可以看到它现在的状态。您是指useRef还是useffect？您是否还知道一种解决方案，可以在div上的

onScroll

事件中使用

className scroll

？附加一个滚动事件列表器并调用函数yeah，我知道，但是变量的效用在孩子身上。因此，当我在父对象中调用函数

calculateInstance

时，它无法到达子对象中的变量。那么，将useEffect移动到父对象是否更好？我更新了文件，以便您可以看到它现在的状态。

<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"
/>;