根据指定长度的元素创建新 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 语句来检查已扫描项目 % 3 的长度是否等于 0，然后创建一个新的 div，但它并没有像我想象的那样工作。

如果有人对我如何做到这一点有任何想法，那将不胜感激。谢谢！

Answer 1

制作另一个var“串行组”。在循环之外创建另一个计数器 j=1 。在循环中将序列添加到序列组，然后如果 j 为 3，则将序列的 div 推入序列并将 j 重置为 1。所有这一切都说，你最好使用 CSS 来完成这种格式化......这是一个 CSS 示例：循环外：const serialdivstyle = {&nbsp; display:'inline-block',&nbsp; width: '28%',&nbsp; margin: '2%',&nbsp; border-left: '1px solid black',&nbsp; text-align: 'center'};循环内部（注意删除条形字符）：var serial = (<div style={serialdivstyle}>{scannedItems[i]}&nbsp;</div>)

Answer 2

我的想法是将元素数组分块，然后生成模板。const chunk = (elements, groupSize) =>&nbsp; elements.reduce((acc, nextElement, index) => {&nbsp; &nbsp; const row = Math.floor(index / groupSize);&nbsp; &nbsp; if (acc[row] === undefined) {&nbsp; &nbsp; &nbsp; acc.push([nextElement]);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; acc[row].push(nextElement);&nbsp; &nbsp; }&nbsp; &nbsp; return acc;&nbsp; }, []);const buildLayout = elements => (&nbsp; <div className="table">&nbsp; &nbsp; {elements.map((row, rowIndex) => {&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div className="row" key={rowIndex}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {row.map(column => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="column" key={column}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {column}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; })}&nbsp; </div>);const elements = [1, 2, 3, 4, 5, 6, 7];const chunks = chunk(elements, 3);const layout = buildLayout(chunks);

Answer 3

这可能有点矫枉过正，但我会采用批处理方法。使其可重复使用且更清洁。像这样的东西。interface Array<T> {&nbsp; &nbsp; chunk(size: number): Array<T>;}Array.prototype.chunk = function<T>(this: T[],size: number) {&nbsp; &nbsp; &nbsp; &nbsp; var temporal = [];&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < this.length; i+= size){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; temporal.push(this.slice(i,i+size));&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return temporal;}然后只使用简单的数组。&nbsp; const listOfItems= ["aaaaaa", "aaaaaa", "aaaaaa", "aaaaaa"].chunk(3);抱歉刚刚注意到它是 Javascript 而不是打字稿，代码将是：Array.prototype.chunk = function (size) {&nbsp; &nbsp; var temporal = [];&nbsp; &nbsp; for (var i = 0; i < this.length; i += size) {&nbsp; &nbsp; &nbsp; &nbsp; temporal.push(this.slice(i, i + size));&nbsp; &nbsp; }&nbsp; &nbsp; return temporal;};