在Next.js中使用Konva：如何处理原生JavaScript DOM相关问题？

1. 确保Konva代码仅在客户端执行 #

Next.js的SSR/SSG阶段无法访问浏览器DOM，所以必须把Konva相关逻辑限定在客户端环境：

• 用dynamic导入组件并关闭SSR：

  import dynamic from 'next/dynamic';
  
  const KonvaCanvas = dynamic(() => import('../components/KonvaCanvas'), {
    ssr: false,
    loading: () => <div>加载画布中...</div>
  });
  

• 在组件内通过useEffect初始化Konva，确保DOM已挂载完成：

  import { useEffect, useRef } from 'react';
  import Konva from 'konva';
  
  export default function KonvaCanvas() {
    const containerRef = useRef(null);
  
    useEffect(() => {
      if (!containerRef.current) return;
  
      // 在此安全操作DOM和Konva实例
      const stage = new Konva.Stage({
        container: containerRef.current,
        width: window.innerWidth,
        height: window.innerHeight
      });
  
      // 添加图层与图形
      const layer = new Konva.Layer();
      const rect = new Konva.Rect({
        x: 50,
        y: 50,
        width: 100,
        height: 100,
        fill: 'red'
      });
      layer.add(rect);
      stage.add(layer);
  
      // 组件卸载时清理资源
      return () => {
        stage.destroy();
      };
    }, []);
  
    return <div ref={containerRef} />;
  }
  

2. 封装Konva逻辑，减少直接DOM操作 #

把重复的Konva操作封装成自定义Hook或组件，降低直接操作DOM的复杂度：

• 自定义Hook示例：

  import { useEffect, useRef } from 'react';
  import Konva from 'konva';
  
  function useKonvaStage(setupFn) {
    const containerRef = useRef(null);
    const stageRef = useRef(null);
  
    useEffect(() => {
      if (!containerRef.current) return;
  
      const stage = new Konva.Stage({
        container: containerRef.current,
        width: 800,
        height: 600
      });
      stageRef.current = stage;
  
      // 执行传入的初始化逻辑
      setupFn(stage);
  
      return () => stage.destroy();
    }, [setupFn]);
  
    return { containerRef, stageRef };
  }
  
  // 使用示例
  export default function MyCanvas() {
    const { containerRef } = useKonvaStage((stage) => {
      const layer = new Konva.Layer();
      const circle = new Konva.Circle({
        x: stage.width() / 2,
        y: stage.height() / 2,
        radius: 50,
        fill: 'blue'
      });
      layer.add(circle);
      stage.add(layer);
    });
  
    return <div ref={containerRef} />;
  }
  

3. 同步React状态与Konva元素 #

避免直接修改DOM，通过React状态更新触发Konva元素的属性变更：

• 示例：用状态控制矩形颜色

  import { useState, useEffect, useRef } from 'react';
  import Konva from 'konva';
  
  export default function ControlledShape() {
    const [fillColor, setFillColor] = useState('red');
    const containerRef = useRef(null);
    const rectRef = useRef(null);
  
    useEffect(() => {
      if (!containerRef.current) return;
  
      const stage = new Konva.Stage({
        container: containerRef.current,
        width: 400,
        height: 400
      });
      const layer = new Konva.Layer();
      const rect = new Konva.Rect({
        x: 100,
        y: 100,
        width: 200,
        height: 200,
        fill: fillColor
      });
      rectRef.current = rect;
      layer.add(rect);
      stage.add(layer);
  
      return () => stage.destroy();
    }, []);
  
    // 状态更新时同步Konva元素属性
    useEffect(() => {
      if (rectRef.current) {
        rectRef.current.fill(fillColor);
        rectRef.current.getLayer().draw();
      }
    }, [fillColor]);
  
    return (
      <div>
        <div ref={containerRef} />
        <button onClick={() => setFillColor('green')}>变绿色</button>
        <button onClick={() => setFillColor('blue')}>变蓝色</button>
      </div>
    );
  }
  

4. 使用React封装库简化操作 #

如果觉得原生Konva处理DOM太繁琐，可以用react-konva——Konva的React封装库，完全通过React组件语法编写，无需直接操作DOM：

• 安装：npm install react-konva konva
• 使用示例：

  import { useState } from 'react';
  import { Stage, Layer, Rect, Circle } from 'react-konva';
  
  export default function ReactKonvaExample() {
    const [rectColor, setRectColor] = useState('red');
  
    return (
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Rect
            x={50}
            y={50}
            width={100}
            height={100}
            fill={rectColor}
            onClick={() => setRectColor('blue')}
          />
          <Circle
            x={200}
            y={100}
            radius={50}
            fill='yellow'
          />
        </Layer>
      </Stage>
    );
  }
  

内容的提问来源于stack exchange，提问作者Rekik Hamza