javascript - 如何在 react 中逐一呈现列表中的项目？

Question

我想一次呈现一个视频缩略图，以便提高我网站的性能。

我曾尝试使用 map ，但 map 一次循环遍历所有项目并返回要渲染的组件列表

我也尝试过使用 while 循环，但 while 循环只呈现一个缩略图(第一个缩略图)

这是我的渲染方法

render(){
        const { videos } = this.state;
        const listVideos = () => {
            let vids = videos
            let loopedAllVids = false;
            while(!loopedAllVids){
                const head = R.head(vids); // returns first item
                const { thumbnail } = head;
                vids = R.tail(vids); // returns all items but first item
                if(vids.length === 0){
                    loopedAllVids = true;
                }
                return(
                    <div 
                      className='video' 
                      style={{background:`url(${thumbnail})`}}>
                    </div>
                )
            }
        }
        return(
            <div  className="row text-center">
                <div className="col-md-12 header">
                    <h1> My Youtube Videos </h1>
                </div>
                <div className="col-md-12">
                    <div className="row">
                        <div className="col-md-8 col-xs-12 col-md-offset-2 videos">
                            {videos.length> 0 && listVideos()}
                        </div>
                    </div>
                </div>
            </div>
        )
    }

Answer 1

while 方法只返回一个拇指，因为“return”语句停止了 while 循环，并且 map 方法在迭代第一个后返回一个新数组。

无论如何，我认为这不是实现您目标的正确方法。我认为将您的拇指存储在组件状态中并一个一个地递增它会更好(可能使用“setTimeout”方法)。

另一种方法是查看已经存在的“Lazyload”解决方案(例如 https://github.com/twobin/react-lazyload)。