在 Nextjs13 中使用 useRef 时发生错误

Question

我正在尝试学习 nextjs13 和 typescript。我导入了 useRef 钩子，它给了我一个错误。

这是代码。

import { useEffect, useRef } from "react"

export const useDraw = () => {

   const canvasRef = useRef<HTMLCanvasElement>(null)

    useEffect(() => {
        
    }, [])

    return { canvasRef }
}

import { FC } from "react"
import { useDraw } from "../hooks/useDraw"

interface pageProps{}

const page: FC<pageProps> = ({}) => {
  const { canvasRef } = useDraw()
  return <div className="w-screen h-screen bg-white flex justify-center items-center">
    <canvas ref={canvasRef} width={750} height={750} className="border border-black rounded"/>
  </div>
}

export default page

Answer 1

NextJS 现在区分黑白服务器组件和客户端组件。

默认情况下，app 目录中的所有组件都是 React Server 组件。要使用，useRef您必须将该组件标记为客户端。

在您正在使用的文件中，在代码的开头useRef添加。'use client'这将确保组件可以在客户端运行。

'use client';

import { useEffect, useRef } from "react";
..

我认为您在使用useDraw钩子的地方也可能需要这个use client声明。

参考：

1. https://nextjs.org/docs/getting-started/react-essentials#client-components