useRef 反应钩子

Posted 2023-02-25

【中文标题】useRef 反应钩子

【英文标题】：useRef React Hook

【发布时间】：2021-03-02 18:28:06

【问题描述】：

我需要一个变量的引用，这样我就可以在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>
    </>
  );

或者它仍然有效？

【问题讨论】：

@EmileBergeron 我用更多信息更新了这个问题。

谢谢，现在更有意义了！

【参考方案1】：

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

我只是忘记了useEffect 钩子中的, []，在<Canvas /> 中，它正在初始化canvas.current。所以我在更改其值后不断重新初始化canvas。

【讨论】：

我在看你问题中的sn-p，没有发现明显问题，所以最终不是XY问题。很高兴你发现它是什么！

【参考方案2】：

你不能这样做吗？

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

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