Question

i有一个函数calculateDistance，该函数计算子组件何时位于父组件的中心。我想在onScroll事件上触发该函数。但是我需要的变量在useEffect中设置，并且不能在该范围之外使用。有谁知道如何解决这个问题？

export function Portfolio() {
  const portfolioRef = React.useRef(null)
  React.useEffect(() => {
    portfolioRef.current.scrollTop = 100
  }, []
  )
  return (
    <div  className={cx(styles.component, styles.scrollWrapper)}>
      <div className={styles.topIcon} dangerouslySetInnerHTML={{ __html: arrow }} />
      <div ref={portfolioRef} onScroll={calculateDistance} className={styles.scroll}>
        <PortfolioItem
          {...{ portfolioRef }}
          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
          {...{ portfolioRef }}
          title='Article about Kaliber Academie'
          text='hola'
          link='#'
          linkTekst='#' />
        <PortfolioItem
          {...{ portfolioRef }}
          title='Article about Kaliber Academie'
          text='hola'
          link='#'
          linkTekst='#' />
        <PortfolioItem
          {...{ portfolioRef }}
          title='Article about Kaliber Academie'
          text='hola'
          link='#'
          linkTekst='#' />
      </div>
      <div className={styles.bottomIcon} dangerouslySetInnerHTML={{ __html: arrow }} />
    </div>
  )
}

export function PortfolioItem({ text, title, link, linkTekst, portfolioRef }) {
  const portfolioItemRef = React.useRef(null)
  React.useEffect(() => {
    const element = portfolioItemRef.current
    const parent = portfolioRef.current
  }, [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) {
  if (!parent || !element) return 0
  const parentRect = parent.getBoundingClientRect()
  const parentCenter = (parentRect.top + parentRect.bottom) / 2
  const elementRect = element.getBoundingClientRect()
  const elementCenter = (elementRect.top + elementRect.bottom) / 2
  const distance = Math.abs(parentCenter - elementCenter)
  return clamp(distance / (parentRect.height / 2), 0, 1)
}

Answer 1

看起来您计算出的距离似乎没有存储在任何地方。您可能希望calulateDistance函数更新在Portfolio的useEffect中引用的状态变量。

您可以从组件属性创建新变量并使用useState()。然后，您可以更新它们并在jsx中引用它们，只要正确限制边界，更改它们就会触发useEffect()。直接使用道具只会在初始加载时触发无限的useEffect。此外，仅在渲染时设置您对“ portfolioItemRef”所做的引用，并将其用作useEffect的边界将不会按原样更新为计算出的距离。将计算出的距离函数移到投资组合组件中。

例如：

const [stateText, setStateText] = useState(text)
useEffect(()=>{console.log('do something')},[stateText]);

这是一个有用的解释：https://medium.com/better-programming/tips-for-using-reacts-useeffect-effectively-dfe6ae951421

Answer 2

最好的办法是监听useEffect

中的滚动事件

删除附加到元素的onScroll

....
<div ref={portfolioRef} className={styles.scroll}>
....

在useEffect内

React.useEffect(() => {
    const calculateDistance = (parent, element) => {
        if (!parent || !element) return 0

        const parentRect = parent.getBoundingClientRect()
        const parentCenter = (parentRect.top + parentRect.bottom) / 2
        const elementRect = element.getBoundingClientRect()
        const elementCenter = (elementRect.top + elementRect.bottom) / 2
        const distance = Math.abs(parentCenter - elementCenter)

        return clamp(distance / (parentRect.height / 2), 0, 1)
    }

    //attach event listener 
    portfolioRef.current.addEventListener("scroll", calculateDistance);

    return () => {
        // remove the event listener when component unmounts
        portfolioRef.current.removeEventListener("scroll", calculateDistance);
    }
}, [])

Demo

您必须决定如何在parent内获取element和calculateDistance

在useEffect中设置变量时如何触发函数？

2 个答案: