如何解决react-打印带有元素的jsx行的最佳实践
我想动态渲染(基于我拥有的视频数量)如下:
<div className="row">
<VideoBoxItem />
<VideoBoxItem />
<VideoBoxItem />
<VideoBoxItem />
</div>
<div className="row">
<VideoBoxItem />
<VideoBoxItem />
<VideoBoxItem />
<VideoBoxItem />
</div>
<div className="row">.....
要实现它,我写了这样的东西:
const VideoBoxes = () => {
const { store } = useContext(VideoContext);
const boxesForEachRow = 4;
/**
* @param videos - array of videos (sliced for 1 row)
* @param rowKey - individual key num
* @return jsx object with single row with x videos.
*/
const printRow = (videos,rowKey) => {
let videoBoxes = []
for(let i in videos){
videoBoxes.push(<VideoBoxItem key={i} video={videos[i]}/>);
}
return (<div className="row" key={rowKey}>{videoBoxes}</div>);
}
/**
* @param videos - full array of videos
* @return jsx object of video rows
*/
const printVideoBoxes = (videos) => {
if(videos)
{
let rowsOfVideoItems = [];
// slice the video array to chunks (for each row)
// and create a jsx object for each row
for(let i=0; i < videos.length; i = i + boxesForEachRow)
{
// collect video rows (jsx)
rowsOfVideoItems.push(
printRow( videos.slice(i,i + boxesForEachRow),i )
);
}
return rowsOfVideoItems;
}else{
return null
}
}
return useObserver(() => (
<div className="block-content">
<div className="box">
<div className="title">
<h2><span>Related Videos</span></h2>
</div>
{printVideoBoxes(store.videos)}
</div>
</div>
));
}
我想知道实现它的最佳方法是什么,因为对我来说,React是新事物,因为我所做的所有循环和数组推送都感觉不对。
谢谢
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。