使用 Ref 反应钩子

Question

我需要一个变量的引用，以便我可以在 Canvas 和 ToolsMenu 中更改该变量的值。因此我做了类似的东西...

function App() {
  const canvas = useRef(); // Value assigned in <Canvas />

  return (
    <>
      <Canvas canvas={canvas} />
      <ToolsMenu canvas={canvas} />
    </>
  );
}

但是当我更改 <ToolsMenu /> 中的 canvas.current 值时，<Canvas /> 中的值将不会更新。有什么方法可以让我在 React 中得到类似 C++ 指针的东西吗？

我认为 useState 挂钩不会起作用，因为我通过方法 (canvas.getCommandStack().undo()) 而不是通过 setCanvas[=21 更改了 canvas 的值=]

function App() {
  const [canvas, setCanvas] = useState(); // Assign in <Canvas />

  return (
    <>
      <Canvas canvas={canvas} setCanvas={setCanvas}/>
      <ToolsMenu canvas={canvas}/>
    </>
  );
}

function Canvas({ canvas, setCanvas }) {
  useEffect(() => {
    setCanvas(new draw2d.Canvas("canvas"));
  }, []);

  // ...

  return <div id="canvas"></div>;
}

function ToolsMenu({ canvas }) {
  const undo = () => canvas?.getCommandStack().undo();
  const redo = () => canvas?.getCommandStack().redo();

  return (
    <>
      <button onClick={undo}>Undo</button>
      <button onClick={redo}>Redo</button>
    </>
  );
}

或者它仍然有效吗？

Answer 1

你不能这样做吗？

function App() {
    const [ref, setRef] = usestate();

    return (
    <>
        <Comp1 value={ref} onChange={setRef(value)}/>
        <Comp2 value={ref} onChange={setRef(value)}/>
    </>
    );
}

Answer 2

我自己解决了这个问题。它与 useRef 挂钩无关。

我刚刚忘记 useEffect 挂钩中的 , []，在 <Canvas /> 中，它正在初始化 canvas.current。因此，我在更改其值后不断重新初始化 canvas。

使用 Ref 反应钩子

useRef React Hook

javascript

reactjs

use-ref