gpt4 book ai didi

javascript - 使用 React 的动态表

转载 作者:行者123 更新时间:2023-11-30 15:39:57 25 4
gpt4 key购买 nike

我正在尝试使用与以下数据结构的 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>)

谢谢

最佳答案

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

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

如果与 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);
}
}

关于javascript - 使用 React 的动态表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40967189/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com