Блог

Мне нужно иметь ссылку на переменную, чтобы я мог изменять значение этой переменной как в Canvas , так и ToolsMenu . Поэтому я сделал что-то похожее на это…

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

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

Но когда я изменяю canvas.current значение в <ToolsMenu /> , значение в <Canvas /> не обновляется.
Могу ли я каким-либо образом получить что-то вроде указателя C в React?

Я не думаю useState , что перехват сработает, потому что я изменяю значение canvas через методы ( canvas.getCommandStack().undo() ), а не через setCanvas

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

Или это все равно будет работать?

Я сам исправил проблему. Это не имеет ничего общего с useRef перехватом.

Я просто забыл , [] внутри useEffect перехвата <Canvas /> , который инициализировался canvas.current . Поэтому я продолжал повторно инициализировать canvas после изменения его значения.

Вы не можете этого сделать?

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

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