[英]How can I pass map data with props
I just wan't store and pass current props.url to the videomodal.我只是不想存储并将当前的 props.url 传递给视频模式。 so I can show the same active video on the video modal.
所以我可以在视频模式上显示相同的活动视频。 I can't use usestate in the map.
我不能在地图中使用 usestate。 how can I pass it?
我怎样才能通过它? or is there a any other solution?
还是有其他解决方案?
Videos.tsx ( props.url
must be in the <VideoModal videoURL={here} />
) 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 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>
I think you could rewrite that in this way:我认为你可以这样重写:
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>)
}
Since you need to render just one video element at time, I think you don't need a map, it's clearer to select the video element before the return statement, so you can pass the data to any other Component that needs them.由于您一次只需要渲染一个视频元素,我认为您不需要地图,在 return 语句之前选择视频元素会更清晰,因此您可以将数据传递给需要它们的任何其他组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.