Question

我在父组件const portfolioRef = React.useRef(null)中有一个React.useRef，并想在子组件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创建一个引用来保存元素或值，并将其初始化为空，
第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"
/>;

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

2 个答案: