javascript - 基于指定长度的元素创建新div的最佳方法？

很抱歉，如果这个问题没有道理，主要是因为很难解释我要完成的工作，所以我会尽力让您理解。

我有一个库存系统，当通过扫描物品的序列号来接收物品时，我的应用程序会列出进来的物品被扫描的序列号。理想情况下，我想完成的工作是说，每扫描三个序列号后，我的应用程序应该创建一个新的div并从本质上开始一行新的已扫描序列号，如果可以的话。

这是我要完成的事情的图片。



现在，我只需在扫描序列号的地方使用它，它就会遍历整个屏幕，并且它们会一直添加到该序列号的右边。

这是我的RecieveItems.js的片段

RenderScannedItems(){
        var scannedItems = this.state.ScannedItems;
        var serials = [];

        for(var i = 0; i < scannedItems.length; i++){

            var serial = (
                    <div style={{margin: '2%'}}>
                        {scannedItems[i]} |
                    </div>
            )

            serials.push(serial);
        }

        return serials;
    }

   render(){
    return(
     <div className="ScannedSerials" id="ScannedSerials">
         {this.RenderScannedItems()}
     </div>
    );
   }

我最初的想法是，我创建了一个if语句，该语句检查scandItems％3的长度是否等于零，然后创建一个新的div，但是它们无法按我认为的方式工作。

如果有人对我如何实现这一目标有任何想法，将不胜感激。谢谢！

最佳答案

制作另一个var“序列组”。在循环外添加另一个计数器j = 1。在循环中，将序列添加到序列组中，然后如果j为3，则将序列的div推到序列上，并将j重置为1。综上所述，最好使用CSS来完成这种格式设置……这是一个CSS示例：
循环外：

const serialdivstyle = {
  display:'inline-block',
  width: '28%',
  margin: '2%',
  border-left: '1px solid black',
  text-align: 'center'
};

循环内部（注意删除条形字符）：

var serial = (
<div style={serialdivstyle}>
{scannedItems[i]}
</div>
)