React useMeasure不适用于nextJS

Question

我目前正在尝试为div设置动画，使其在卡片内从下到上滑动。

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

然后，我应该将一个绝对定位的div的顶部偏移设置为其父级的高度，并更新该值以使其动画化

问题是，当记录useMeasure((钩子返回的边界时，所有值都为零。。。

这里有一个链接到生产示例，面板没有向下滑动，因为检测到的父对象高度为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，但在文档中，数组中的第一项是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} >

我认为这是不对的。。。