React - 如何循环和渲染 n 个元素

Question

目前我正在开发一个应用程序，我想在其中呈现具有 N 行和 N 列的表格。

行数和列数将选择用户。

我在这方面苦苦挣扎太久，我不知道该怎么办。我已经尝试了几种解决方案，这些解决方案是在 stackoverflow 或 Google 上找到的。但我得到的唯一结果是错误。

显然必须有两个循环。第一个循环应该制作 tr，第二个循环应该制作 td 并将它们放在 tr 内。我在 stackoverflow 上的某处读到您必须 像我正在使用的那样使用数组。没有它有什么办法吗？

这是我的功能

function renderBoard(rows,columns){
    let result=[];
    for(var i = 0; i < rows; i++){
        result.push(<tr></tr>)
        for(var j=0;j<columns;j++){
            result[i] = <td></td>
        }
    }
    return result;
}

渲染

return(
        <div>
            <table>
                <tbody>
                    {renderBoard(3,3)}
                </tbody>
            </table>
        </div>
    )

没有第二个 for 循环，它正在制作和渲染三个 .. 但是当我尝试用 td 填充它们时，结果只有三个 td ..

我不知道该怎么办。有人可以帮我吗？

Answer 1

看起来你每次都用“td”标签覆盖“tr”标签。 尝试创建 2 个单独的数组，然后将它们组合起来。

function renderBoard(intRows, intColumns) {
        var rows = [];
        for (var i = 0; i < intRows; i++) {
            var columns = [];
            for (var j = 0; j < intColumns; j++) {
                columns.push(<td></td>);
            }
            rows.push(<tr>{columns}</tr>);
        }
        return rows;
    }

Answer 2

签出这段代码sn-p

render() {
    return <table>
        <thead>
            <tr>
                {this.renderColumns()}
            </tr>
        </thead>
        <tbody>
            {
                this.renderRows()
            }
        </tbody>
    </table>
}


renderRows = () => { 
    const {rows} = this.props;
    return Array(rows).map((row,index) => <tr key={index}>{this.renderColumns(index)}</tr>)
}

renderColumns = (row) => { 
    const {cols} = this.props;
    return Array(cols).map((col , index) => <td key={index}>{row} - {index}</td>)
}