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 (将#修改为@）