為什么用 react-router-dom 轉發 refs 返回 null？

Question

在我的App.js我有一個ref ：

const canvasView1 = React.createRef();
...
<div ref={canvasView1}/>

以及以 ref 作為道具的Homepage組件的路由：

<Route
    index
    path="/welcome"
    element={<Homepage canvasView1={canvasView1}/>}
/>

然后，在Homepage.js中，我使用forwardRef()並log轉發的 ref：

export const Homepage = React.forwardRef((props, canvasView1) => {
    useEffect(() => {
        console.log('# canvasView1 Homepage.js :', canvasView1)
    }, [canvasView1]);
    ...
}

但它返回null而在App.js中它返回 object：

我已經閱讀了有關 refs 轉發的文檔並嘗試了多種語法，但它仍然不起作用。

Answer 1

1. 由於您使用的是 React function 組件，因此您需要使用useRef掛鈎，因此創建的 ref 是一個穩定的參考。 React.createRef()將在每個渲染周期創建一個全新的 React ref 引用。

    const canvasView1 = React.useRef();

2. Homepage組件正在轉發特殊的ref道具，而不是任何其他可能持有或不持有 React ref 值的常規命名道具。 在Homepage組件的ref屬性上傳遞canvasView1 ref，以便轉發。

    <Homepage ref={canvasView1} />

   或更新Homepage組件以訪問傳遞的canvasView1 。

    export const Homepage = ({ canvasView1 }) => { React.useEffect(() => { console.log("# canvasView1 Homepage.js:", canvasView1); }, [canvasView1]); return <h1 ref={canvasView1}>Homepage</h1>; });

代碼：

export default function App() {
  const canvasView1 = React.useRef();

  React.useEffect(() => {
    console.log("# canvasView1 App.js :", canvasView1);
  }, [canvasView1]);

  return (
    <div className="App">
      <div ref={canvasView1} />
      <Routes>
        <Route path="/" element={<Homepage ref={canvasView1} />} />
      </Routes>
    </div>
  );
}