Reactjs 呈现对dom元素具有引用的React组件的多个实例

我有一个

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

import React，{useffect，useRef}来自“React”
const VideoPlyr=（{src，thumbnailUrl，isYoutube=false}）=>{
const playerRef=useRef（）
useffect（（）=>{
如果（Plyr的类型！=‘未定义’）{
//Plyr通过cdn加载
playerRef.current.plyr=新的plyr（'.plyreact'，{}）
}
return（）=>{
如果（Plyr的类型！=‘未定义’）{
playerRef.current.plyr？.destroy（）
}
}
}, [])
返回YouTube(
) : (
)
}
导出默认VideoPlyr

我在一个旋转木马组件中使用它，它基本上包含一个

VideoPlyr

组件列表，每个组件都有对应于不同视频的不同道具

Plyr

视频播放器仅连接到项目列表中的

VideoPlyr

组件的第一个实例，

VideoPlyr

的后续实例看起来像HTMl5视频播放器

我认为，这与

ref

有关，但我不确定什么是正确的方法

如何确保

Plyr

将自身连接到每个实例，而不仅仅是第一个实例