在Next.js中如何解决来自服务器的额外属性

在NextJs应用程序中渲染具有指定高度和子组件内的画布时，发生此错误我尝试在我的NextJs应用程序中添加此https://codepen.io/rban/pen/BaNgQqM?fbclid=IwAR3J4hFkI6jJH5WrNjqbBC4PrF7Sv_xknY0SicDf5GffqjsjOtGzfRe3ETE鼠标效果，一切正常，直到由于NextJs的SSR和SSG发生此错误。我如何解决此问题？我已经尝试静态导入效果作为组件，但画布与高度仍然存在。

client.js:1  Warning: Extra attributes from the server: width,height
at canvas
at div
at MouseEffectRender (webpack-internal:///./components/MouseEffectRender.tsx:16:11)
at LoadableComponent (webpack-internal:///./node_modules/next/dist/shared/lib/loadable.js:113:9)
at Home (webpack-internal:///./pages/index.tsx:40:11)
at PresenceChild (webpack-internal:///./node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs:15:26)
at AnimatePresence (webpack-internal:///./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs:72:28)
at MyApp (webpack-internal:///./pages/_app.tsx:21:11)
at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:80:11)
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:306:63)
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:858:919)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:92:1)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:197:11)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:380:11)

字符串
在这个canvas标签中

import React, { ReactNode } from 'react';
import { color_hover } from '../components/MouseEffect';
import { useCallback, useEffect, useRef} from 'react';

interface Props {
  children: ReactNode;
}

export default function MouseEffectRender({ children }: Props) {

 

     const handleMouseMove = useRef((event: React.MouseEvent<HTMLDivElement>) => {});
    
      handleMouseMove.current = useCallback((event: React.MouseEvent<HTMLDivElement>) => 
       {
        color_hover(event);
      }, []);
    
      useEffect(() => {
        if (typeof document !== 'undefined') {
          handleMouseMove.current = (event: React.MouseEvent<HTMLDivElement>) => {
            color_hover(event);
          }
        }
      }, [handleMouseMove]);
    
      return (
        <>
          <div className="theBall-outer">
            <div className="theBall"></div>
          </div>
    
          <div id="page" className="site">
          <canvas className="banner_canvas  " id="canvas_banner">  </canvas>
            <div className="top-title wow fadeInUp" onMouseMove= 
             {handleMouseMove.current} ></div>
             {children}
          </div>
          
        </>
      );
    };

型
有人能帮忙吗？

可能发生的情况是，您在服务器上对画布执行的操作与在客户端上不同。
确保画布的宽度和高度在服务器上与客户端上相同，直到Nextjs完成水合。
你不应该使用useRef钩子来存储useCallback值。
如果你想在客户端运行而不是在服务器上运行，把它放在useEffect钩子上。useEffects只在客户端被调用。永远不要检查服务器上的窗口或文档，它会出错。

const handleMouseMove = useCallback((event:React.MouseEvent<HTMLDivElement>) => {
    color_hover(event);
}, []);

useEffect(() => {
    //client side only
    //stuff that happens on page load after hydration is complete
}, [handleMouseMove]);

return (
    <>
      <div className="theBall-outer">
        <div className="theBall"></div>
      </div>

      <div id="page" className="site">
      <canvas className="banner_canvas  " id="canvas_banner">  </canvas>
        <div className="top-title wow fadeInUp" onMouseMove={handleMouseMove} ></div>
         {children}
      </div>
      
    </>
);

字符串

在Next.js中如何解决来自服务器的额外属性

1条答案

相关问题

热门标签

最新问答