如何使用useEffect中的自定义钩子创建的Ref

Question

我正在使用自定义钩子以链接到Canvas。但是，我无法访问useEffect中的钩子所生成的ref的“当前”对象。同时，在hook函数中，我可以访问canvas对象，并且可以向其中添加对象。

非常感谢您的帮助。

自定义挂钩

import React, { useRef, useCallback } from 'react';
import { fabric } from 'fabric'

const useFabric = (onChange) => {
    const fabricRef = useRef();
    const disposeRef = useRef();
    return useCallback((node) => {
        if (node) {
            fabricRef.current = new fabric.Canvas(node);
            if (onChange) {
                disposeRef.current = onChange(fabricRef.current);
            }
        }
        else if (fabricRef.current) {
            fabricRef.current.dispose();
            if (disposeRef.current) {
                disposeRef.current();
                disposeRef.current = undefined;
            }
        }
    }, []);
};

export default useFabric

我想在其中使用钩子和画布的其他组件：

import React, { useEffect, useRef } from 'react';
import useFabric from './mycanvas';
import { fabric } from 'fabric'

const FabricDemo = ({controls}) => {
  let canvas;


  const ref = useFabric((fabricCanvas) => {
    var a = new fabric.Circle({
      radius: 50,
      originX: 'center',
      originY: 'center',
      fill: '#FFF',
      top: 50,
      left: 50,
    });

    fabricCanvas.add(a).setActiveObject(a);
    // is added without problem
  });



  useEffect(() => {

     var a = new fabric.Circle({
       radius: 50,
       originX: 'center',
       originY: 'center',
       fill: '#FFF',
       top: 50,
       left: 50,
     });

    ref.add(a).setActiveObject(a);
    // ref.current.add(a).setActiveObject(a);
    // either ref.add or ref.current.add produces ERROR


  }, [controls])


  return <div style={{border: '1px solid red'}}>
    <canvas ref={ref} width={600} height={400} />
  </div>
}

export default FabricDemo

Answer 1

  const ref = useRef();

  useFabric((fabricCanvas) => {
    var a = new fabric.Circle({
      radius: 50,
      originX: 'center',
      originY: 'center',
      fill: '#FFF',
      top: 50,
      left: 50,
    });

    fabricCanvas.add(a).setActiveObject(a);
    ref.current = fabricCanvas
  });



  useEffect(() => {

     ...
     // ref.current is now equal to `fabricCanvas`


  }, [controls])

但是老实说，这时代码已经脱离轨道，所有这些引用只会导致不好的事情。 Don't overuse refs

复制/粘贴代码的次数过多，不了解。