我试图在NextJs项目中的函数组件的主体中使用useRef()
钩子,但仍然得到以下错误。我已经通过了React Hook规则,我找不到这个错误的原因,这不工作。有人有主意吗?
错误:无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一:
import React, { useRef } from 'react';
export default function Diagram() {
const svgRef = useRef();
return (
<>
<div className="container-svg py-4">
<svg ref={svgRef} viewBox="0 0 300 300">
<g transform="translate(150, 150)">
<g>
<path id="triangle" d="M0, -125 L-150,150 L150, 150 L0, -125 M 0,50 L-150, 150 M150, 150 L0,50 L0,-125" stroke="black" fill="none"/>
</g>
{
posts.map( post => {
return (
<circle key={post.id} className="circle" cx={post.point.x} cy={post.point.y} r="5" />
)
})
}
<circle className="circle" cx="0" cy="0" r="5" />
</g>
</svg>
</div>
</>
)
}
2条答案
按热度按时间mzmfm0qo1#
我使用
next 10.1.3
和react 17.0.1
,我使用React.createRef()
,因为useRef()
不工作。我根据最初提出的问题举例说明。我添加这个是因为评论中的createRef答案是不完整的,这使得它很容易理解。tp5buhyn2#
这可能是因为useRef()和其他react钩子对于客户端组件是独占的。如果你没有指定你的组件是客户端的,那么NextJS的后续版本会默认这是一个服务器端的组件。使用指令“use client”在客户端环境中呈现此组件。