亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

根據指定長度的元素創建新 div 的最佳方法?

根據指定長度的元素創建新 div 的最佳方法?

HUH函數 2022-01-13 16:59:10
對不起,如果這個問題沒有意義,主要是因為很難解釋我想要完成的事情,所以我會盡力讓你理解。我有一個庫存系統,當通過掃描序列號接收物品時,我的應用程序會列出進入時掃描的序列號。理想情況下,我想要完成的是,在每掃描 3 個序列號之后,我的應用程序應該如果有意義的話,創建一個新的 div 并基本上開始一行新的掃描序列號。這是我想要完成的圖片?,F在我只是讓它在掃描序列號的地方工作,它穿過屏幕,他們只是繼續添加到該序列號的右側。這是我的 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,但它并沒有像我想象的那樣工作。如果有人對我如何做到這一點有任何想法,那將不勝感激。謝謝!
查看完整描述

3 回答

?
一只萌萌小番薯

TA貢獻1795條經驗 獲得超7個贊

制作另一個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>

)


查看完整回答
反對 回復 2022-01-13
?
陪伴而非守候

TA貢獻1757條經驗 獲得超8個贊

我的想法是將元素數組分塊,然后生成模板。


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);


查看完整回答
反對 回復 2022-01-13
?
侃侃無極

TA貢獻2051條經驗 獲得超10個贊

這可能有點矯枉過正,但我會采用批處理方法。使其可重復使用且更清潔。


像這樣的東西。


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;

};


查看完整回答
反對 回復 2022-01-13
  • 3 回答
  • 0 關注
  • 245 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號