javascript - 使用 Javascript React 创建网格

Question

我想创建一个网格，我已经有一个工作代码可以创建网格，就像我想要的那样，代码看起来很丑，并且渲染任何超过 100 列/行长的东西都非常慢。

有没有办法用更简单的方法重新创建相同的网格？我对 React 很陌生，直到现在才使用 Java，所以我可能遗漏了一些东西或者只是心态错误。

任何有关改进的帮助将不胜感激。

这是代码：

function makeRows(size) {
    let grid = []
    let disabled = 0
    let currentFieldDisabled = true
    document.documentElement.style.setProperty('--grid-cols', +size + 1);
    for (let c = 0; c < ((+size + 1) * size); c++) {
        if (c % size === 0) {
            grid.push(<label className="grid-item" for={"grid-item" + (c + 1)}>test</label>)
        }

        if (disabled === c) {
            disabled = disabled + +size;
            currentFieldDisabled = true;
        }

        if (c / size < 1) {
            grid.push(<label className="grid-item" for={"grid-item" + (c + 1)}>test</label>)
        } else {
            if (currentFieldDisabled) {
                currentFieldDisabled = false;
                disabled++;
                grid.push(<input disabled={true} type="text" placeholder="X" id={"grid-item" + (c + 1)} className="grid-item"/>)
            } else {
                grid.push(<input type="text" id={"grid-item" + (c + 1)} className="grid-item"/>)
            }
        }
    }
    return grid
}

代码的目标是创建一个包含与 2 次方大小一样多的字段的网格，因此如果我们将其设为 10，我们将得到一个包含 100 个字段的网格。现在因为每个字段都应该有它们的坐标，所以说每个字段都应该有一个标题，水平的顶部和垂直的左侧，所以大小增加一，使顶部多 1 行，多一列有权为标题/坐标留出空间。想象一下它就像一个棋盘，只是在不同的地方坐标。

下一个目标是从左上角到右下角制作一行禁用字段，这样当两个坐标相同时，应该禁用该字段，因为左侧和顶部的坐标应该始终位于末尾同样，它始终是从左上角到右下角的禁用线。

现在有什么办法可以让代码更精炼，性能更好？在我的应用程序中有许多实例，其中网格应该呈现大于 100 的大小，并且在该点加载所需的时间呈指数增长。

对不起我的英语不好，提前谢谢你:)

标签： javascripthtmlreactjsgrid