javascript - 在useEffect中设置变量时如何触发函数?
问题描述
我有一个函数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)
}
解决方案
看起来您计算的距离似乎没有存储在任何地方。您可能希望 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
推荐阅读
- python - 误分类率和总误差不下降——神经网络调试
- javascript - JavaScript 字符串文字重用组件
- python - 使用 Python 的 Microsoft Sharepoint 身份验证
- spring-boot - 在 jwt 授权中获取问题 authenticationProvider
- mysql - MySQL 8 - 触发 INSERT - VCS 的重复 AUTO_INCREMENT id
- jquery - 选择多个传单标记并生成下载链接
- angular - S3 托管的 Angular 应用、Route53 和基于查询字符串的自定义
- scala - 有没有办法将具有多个小数点的字符串转换为 Scala 中的双精度值?
- mysql - 当数据可以出现在一个表的多个列中时,连接两个表的结果
- python - 在 PyQt5 中,getOpenFileName 不会导致在 Pycharm 中弹出文件选择