useRef 反應鈎子

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 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

我自己解決了這個問題。 它與useRef掛鈎無關。

我只是忘記了<Canvas />內部useEffect掛鈎中的, [] ，它正在初始化canvas.current 。 所以我在改變它的值后不斷地重新初始化canvas 。

Answer 2

你不能這樣做嗎？

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

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