多個視頻元素指向同一個 useRef() [React]

Question

是否可以在 2 個元素上使用相同的videoRef ？

預期結果：在 2 個不同的<video>中顯示 2 個視頻，同時指向同一頁面上的相同videoRef 。

const videoRef = useRef();
const videoRef2 = useRef();

return (
  <div>
    {/* ... a video (videoRef) at top */}
    <video
      videoRef={videoRef}
    />
    {/* ... somehere else on the same page, the same video (videoRef) */}
    <video
      videoRef={videoRef}
    />
    {/* ... another video (videoRef2) */}
    <video
      videoRef={videoRef2}
    />
  </div>
);

Answer 1

我不確定這是否可行，但有一個很好的方法來處理這個

const videoRefs = useRef([React.createRef(), React.createRef()]);

<video
   ref={videoRefs.current[0]}
/>
....
<video
   ref={videoRefs.current[1]}
/>

或者可能是這樣的：

const videoRefs = useRef([]);

<video
  ref = {el => videoRefs.current[0] = el}
/>
....
<video
  ref = {el => videoRefs.current[1] = el}
/>

也檢查一下

Answer 2

• 不可以。您不能使用對 2 個元素的引用，因為在真實 DOM 中呈現的每個元素都是唯一的。 videoRef 將引用第二個<video>