javascript - 如何将数组项一个一个地添加到 DOM 中？

Question

当 Array.map 完成其循环时，我想将数组中的项目一个一个地添加到 DOM，而不是批量添加。 我该怎么做？

<div className="gallery-content">
    <div className="content-to-display">
          {iconsToDisplay
             .map((icon, index) => 
                <GalleryItem 
                   key={index}
                   index={index} 
                   item={icon}
                   size={iconSize}
                   isSelected={index===selectedIconIndex}
                   onClick={this.setIconIndex}/>)}
    </div>                
</div>

Answer 1

我认为一个方便的方法是先渲染加载微调器或占位符，然后在 componentDidMount 中的某处执行大量数据获取。 .

这样一来，您就不必延迟或手动调用 appendChild，因为即使是大量的组件也会在最初快速呈现。

UPD:看这个jsfiddle例如。首先，画廊项目使用初始 loading... 消息呈现，这非常快，然后我在 componentDidMount 中模拟了重载，它已经更新了状态“加载”内容，React 已成功重新呈现它们。