useRef React Hook

Мне нужна ссылка на переменную, чтобы я мог изменить значение этой переменной как в 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>
    </>
  );
}

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


reactjs javascript use-ref
person frizd    schedule 02.03.2021    source источник
comment
@EmileBergeron Я обновил вопрос, добавив дополнительную информацию.   -  person frizd    schedule 02.03.2021
comment
Спасибо, теперь это имеет смысл!   -  person Emile Bergeron    schedule 02.03.2021

Ответы (2)


arrow_upward
1
arrow_downward

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

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

person frizd    schedule 02.03.2021
comment
Я просмотрел фрагмент вашего вопроса и не обнаружил очевидной проблемы, так что, в конце концов, это не проблема XY. Рад, что ты узнал, что это было! - person Emile Bergeron; 02.03.2021

arrow_upward
-1
arrow_downward

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

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

    return (
    <>
        <Comp1 value={ref} onChange={setRef(value)}/>
        <Comp2 value={ref} onChange={setRef(value)}/>
    </>
    );
}
person BFP    schedule 02.03.2021
comment
Я обновил вопрос, добавив дополнительную информацию - person frizd; 02.03.2021