Dynamische Tabelle mit React

Question

Ich versuche, eine dynamische Tabelle mit reagieren mit der folgenden Datenstruktur zu machen:

{ 
    numRows: 2, 
    numCols: 3, 
    cells: [ 
    { 
     id: 1, 
     pos: { 
     row: 1, 
     col: 1 
     }, 
     content: 'This is the content 1' 
    }, 
    { 
     id: 2, 
     pos: { 
     row: 1, 
     col: 2 
     }, 
     content: 'This is the content 2' 
    }, 
    { 
     id: 3, 
     pos: { 
     row: 1, 
     col: 3 
     }, 
     content: 'This is the content 2.5' 
    }, 
    { 
     id: 4, 
     pos: { 
     row: 2, 
     col: 1 
     }, 
     content: 'This is the content 3' 
    }, 
    { 
     id: 5, 
     pos: { 
     row: 2, 
     col: 3 
     }, 
     content: 'This is the content 4' 
    } 
    ] 
} 

Ich denke, diese Datenstruktur ist am besten für meine Anwendung als ein Benutzer Zelle außerhalb der Reihenfolge bearbeiten kann aber Wenn es einen besseren Weg gibt, lass es mich wissen.

Ich habe die folgende Logik für das Rendern dieser Daten in eine Tabelle, aber es enthält viele Schleifen, also frage ich mich, ob es eine bessere/effizientere Möglichkeit zum Rendern dieser Datenstruktur gibt?

let rows = [] 

for (let row = 1; row <= numRows; row++) { 
    let children = [] 

    for (let col = 1; col <= numCols; col++) { 
    let hasCell = false 
    cells.forEach((cell) => { 
     if (cell.pos.row === row && cell.pos.col === col) { 
     hasCell = true 
     children.push(<Cell>{cell.content}</Cell>) 
     } 
    }) 

    if (!hasCell) { 
     children.push(<Cell />) 
    } 
    } 

    rows.push(<Row>{children}</Row>) 

Dank

Answer 1

Die Struktur der Tabelle ist die Haupt hier Sorge.

Um eine bessere Lösung zu erhalten, versuchen Sie, Ihre Tabellendaten neu zu strukturieren.

Wenn memory ist kein Problem im Vergleich zu time, einige, wie verwalten Ihre N^3 Iteration N^2 iterative Lösung zu reduzieren.

var tableData = { 
 
    numRows: 2, 
 
    numCols: 3, 
 
    cells: [ 
 
    { 
 
     id: 1, 
 
     pos: { 
 
     row: 1, 
 
     col: 1 
 
     }, 
 
     content: 'This is the content 1' 
 
    }, 
 
    { 
 
     id: 2, 
 
     pos: { 
 
     row: 1, 
 
     col: 2 
 
     }, 
 
     content: 'This is the content 2' 
 
    }, 
 
    { 
 
     id: 3, 
 
     pos: { 
 
     row: 1, 
 
     col: 3 
 
     }, 
 
     content: 'This is the content 2.5' 
 
    }, 
 
    { 
 
     id: 4, 
 
     pos: { 
 
     row: 2, 
 
     col: 1 
 
     }, 
 
     content: 'This is the content 3' 
 
    }, 
 
    { 
 
     id: 5, 
 
     pos: { 
 
     row: 2, 
 
     col: 3 
 
     }, 
 
     content: 'This is the content 4' 
 
    } 
 
    ] 
 
}; 
 

 
function createEmptyTable(rows, cols){ 
 
    var arr = []; 
 
    for(var i = 0; i < rows; i++){ 
 
    arr.push(new Array(cols)); 
 
    } 
 
    return arr; 
 
} 
 

 
var rows = tableData.numRows; 
 
var cols = tableData.numCols; 
 
var table = createEmptyTable(rows, cols); //crate empty table 2D 
 
tableData.cells.forEach(function(cell, i){ 
 
    table[cell.pos.row-1][cell.pos.col-1] = cell //cell data into table cell 
 
}); 
 

 
console.log(table); //table structure 
 

 
for(var i = 0; i < rows; i++) 
 
    for(var j = 0; j < cols; j++){ 
 
    var cell = table[i][j]; 
 
    if(cell){ 
 
     //your render method here 
 
     console.log(cell.content); 
 
    } 
 
    }