[英]How can I pass map data with props
我只是不想存储并将当前的 props.url 传递给视频模式。 所以我可以在视频模式上显示相同的活动视频。 我不能在地图中使用 usestate。 我怎样才能通过它? 还是有其他解决方案?
Videos.tsx ( props.url
必须在<VideoModal videoURL={here} />
)
<div className="video__container">
<div className="video__item">
{VIDEO_LIST.map((props: any) => (
<div key={props.id}>
{props.id === currentItem && (
<>
<ReactPlayer
url={props.url}
playing={true}
loop={true}
volume={0}
muted={true}
height="100%"
width="100%"
controls={true}
config={{
file: {
attributes: {
disablepictureinpicture: "true",
controlsList:
"disablepictureinpicture nodownload noplaybackrate",
},
},
}}
/>
</>
)}
</div>
))}
</div>
</div>
<div className="play__video">
{isModalOpen && (
<VideoModal
handleCloseModal={closeModal}
videoURL={HERE I NEED TO PASS THE URL}
/>
)}
</div>
VideoModal.tsx
<div className="body">
<div className="player-wrapper">
<ReactPlayer
className="react-player fixed-bottom"
url={videoURL}
width="100%"
height="100%"
playing={true}
controls={true}
/>
</div>
</div>
我认为你可以这样重写:
const currentVideo = useMemo(() => VIDEO_LIST.find(v => v.id === currentId ),[currentItem, VIDEO_LIST])
return ( <div className="video__container">
<div className="video__item">
{currentVideo && (
<ReactPlayer
url={currentVideo.url}
playing={true}
loop={true}
volume={0}
muted={true}
height="100%"
width="100%"
controls={true}
config={{
file: {
attributes: {
disablepictureinpicture: "true",
controlsList:
"disablepictureinpicture nodownload noplaybackrate",
},
},
}}
/>
)}
</div>
</div>
<div className="play__video">
{ isModalOpen &&
currentVideo && (
<VideoModal
handleCloseModal={closeModal}
videoURL={currentVideo.url}
/>
)}
</div>)
}
由于您一次只需要渲染一个视频元素,我认为您不需要地图,在 return 语句之前选择视频元素会更清晰,因此您可以将数据传递给需要它们的任何其他组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.