根据指定长度的元素创建新 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 = {

  display:'inline-block',

  width: '28%',

  margin: '2%',

  border-left: '1px solid black',

  text-align: 'center'

};

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

var serial = (

<div style={serialdivstyle}>

{scannedItems[i]} 

</div>

)

Answer 2

我的想法是将元素数组分块，然后生成模板。

const chunk = (elements, groupSize) =>

  elements.reduce((acc, nextElement, index) => {

    const row = Math.floor(index / groupSize);

    if (acc[row] === undefined) {

      acc.push([nextElement]);

    } else {

      acc[row].push(nextElement);

    }

    return acc;

  }, []);

const buildLayout = elements => (

  <div className="table">

    {elements.map((row, rowIndex) => {

      return (

        <div className="row" key={rowIndex}>

          {row.map(column => (

            <div className="column" key={column}>

              {column}

            </div>

          ))}

        </div>

      );

    })}

  </div>

);

const elements = [1, 2, 3, 4, 5, 6, 7];

const chunks = chunk(elements, 3);

const layout = buildLayout(chunks);

Answer 3

这可能有点矫枉过正，但我会采用批处理方法。使其可重复使用且更清洁。

像这样的东西。

interface Array<T> {

    chunk(size: number): Array<T>;

}

Array.prototype.chunk = function<T>(this: T[],size: number) {

        var temporal = [];

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

            temporal.push(this.slice(i,i+size));

        }

        return temporal;

}

然后只使用简单的数组。

  const listOfItems= ["aaaaaa", "aaaaaa", "aaaaaa", "aaaaaa"].chunk(3);

抱歉刚刚注意到它是 Javascript 而不是打字稿，代码将是：

Array.prototype.chunk = function (size) {

    var temporal = [];

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

        temporal.push(this.slice(i, i + size));

    }

    return temporal;

};