reactjs - 渲染具有对 dom 元素的 ref 的 React 组件的多个实例

Question

我有一个VideoPlayer看起来像这样的组件

import React, { useEffect, useRef } from 'react'

const VideoPlyr = ({ src, thumbnailUrl, isYoutube = false }) => {
  const playerRef = useRef()

  useEffect(() => {
    if (typeof Plyr !== 'undefined') {
      // Plyr is loaded via cdn 
      playerRef.current.plyr = new Plyr('.plyr-react', {})
    }

    return () => {
      if (typeof Plyr !== 'undefined') {
        playerRef.current.plyr?.destroy()
      }
    }
  }, [])

  return isYoutube ? (
    <div className='plyr__video-embed plyr-react plyr' id='player' ref={playerRef}>
      <iframe
        src={`https://www.youtube.com/embed/${src}?rel=0&showinfo=0&autoplay=0`}
        allowFullScreen
        allowTransparency
        allow='autoplay'
        frameBorder='0'
      ></iframe>
    </div>
  ) : (
    <div>
      <video ref={playerRef} className='plyr-react plyr' playsInline controls poster={thumbnailUrl}>
        <source src={src}></source>
      </video>
    </div>
  )
}

export default VideoPlyr

我在轮播组件中使用它，该组件基本上包含一个组件列表，VideoPlyr每个组件都有对应于不同视频的不同道具。

视频播放器仅将Plyr自身附加到VideoPlyr项目列表中组件的第一个实例，后续实例VideoPlyr看起来像 HTMl5 视频播放器。

我认为，这与此有关，ref但我不确定正确的方法是什么。

我如何确保它Plyr附加到每个实例而不仅仅是第一个实例。

标签： reactjsuse-effectuse-ref