Question

我正在尝试使用以下数据结构的反应来呈现动态表：

{
  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

桌子的结构是这里的主要问题。

为了获得更好的解决方案，请尝试重新构建表数据。

如果memory与time相比不是一个问题，那么有些人可以设法将您的N^3次迭代减少到N^2次迭代解决方案。

＆＃13;

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

＆＃13;

带React的动态表

1 个答案: