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

Question

很抱歉，如果这个问题没有意义，主要是因为很难解释我想要完成的任务，所以我会尽力让你理解。

我有一个库存系统，当通过扫描序列号接收元素时，我的应用程序会列出元素进入时扫描的序列号。我想要完成的理想情况是，每扫描 3 个序列号后我的应用程序应该创建一个新的 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，但它并没有像我想象的那样工作。

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

Answer 1

创建另一个变量“串行组”。在循环之外创建另一个计数器 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>
)