React useMeasure 不适用于 nextJS？

Question

我目前正在尝试制作 div 的动画，使其在卡片内从下往上滑动。

useMeasure 钩子应该通过我附加到它的处理程序给我包装器的高度：<div className="desc-wrapper" {...bind}>

然后我应该将绝对定位的顶部偏移量 div 设置为其父级的高度并更新此值以使其具有动画效果。

问题是在记录 useMeasure() 挂钩返回的边界时，所有值都为零...

这里是一个link面板没有被滑下的生产示例，因为检测到父级的高度为0：https://next-portfolio-41pk0s1nc.vercel.app/page-projects

卡片组件名为Project，代码如下：

import React, { useEffect, useState } from 'react'
import './project.scss'
import useMeasure from 'react-use-measure';
import { useSpring, animated } from "react-spring";


const Project = (projectData, key) => {
    const { project } = projectData

    const [open, toggle] = useState(false)
    const [bind, bounds] = useMeasure()
    const props = useSpring({ top: open ? 0 : bounds.height })

    useEffect(() => {
        console.log(bounds)
    })

    return (
        <div className="project-container">
            <div className="img-wrapper" style={{ background: `url('${project.illustrationPath}') no- 
              repeat center`, backgroundSize: project.portrait ? 'contain' : 'cover' }}>
            </div>
            <div className="desc-wrapper" {...bind} >
                <h2 className="titre">{project.projectName}</h2>
                <span className="description">{project.description}</span>
                <animated.div className="tags-wrapper" style={{ top: props.top }}>

                </animated.div>
            </div>
        </div>
    );
};

export default Project;

这是 nextJS 的设计问题还是我做错了什么？谢谢

Answer 1

我从未使用过 react-use-measure，但在 documentations 中，数组中的第一项是 ref，您应该这样使用它。

function App() {
  const [ref, bounds] = useMeasure()

  // consider that knowing bounds is only possible *after* the view renders
  // so you'll get zero values on the first run and be informed later

  return <div ref={ref} />
}

你做到了...

<div className="desc-wrapper" {...bind} >

我认为这不正确...

React useMeasure 不适用于 nextJS？

React useMeasure not working with nextJS?

reactjs

next.js

react-spring

react-hooks