javascript - 使用 React 的动态表

Question

我正在尝试使用与以下数据结构的 react 来呈现动态表:

{
  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'
    }
  ]
}

我认为这种数据结构最适合我的应用程序，因为用户可以乱序编辑单元格，但如果有更好的方法请告诉我。

我有以下将此数据呈现到表中的逻辑，但它包含许多循环，所以我想知道是否有更好/更有效的方式来呈现此数据结构？

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

谢谢

Answer 1

表的结构是这里的主要问题。

为了有更好的解决方案，请尝试重组您的表数据。

如果与 time 相比，memory 不是问题，一些方法可以将 N^3 迭代减少到 N^ 2 迭代求解。

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