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)}/>
    </>
    );
}