ReactJS-在整个网页上显示网格

Question

我试图在整个网页上显示一个网格，该网格由具有相同高度/宽度的小单元组成，如下面的示例所示，由于这是我的第一个React项目，我正在寻找一种方法来做到这一点：

这是Main.jsx

import React, {Component} from 'react';
import Node from './Node/Node';

import './Main.css';

export default class Main extends Component {
    constructor(props){
        super(props);
        this.state = {
            nodes: [],
        };
    }

    componentDidMount(){
        const nodes = [];
        for(let row = 0; row < 15; row++){
            const currentRow = [];
                for(let col = 0; col < 50; col++){
                currentRow.push([]);
            }
            nodes.push(currentRow);
        }
        this.setState({nodes})
    }

    render(){
        const {nodes} = this.state;
        return(
            <div className="grid">
                {nodes.map((row, rowIndex)=>{
                    return <div>{row.map((node, nodeIndex)=><Node></Node>)}</div>
                })}
            </div>
        );
    }
}

这是Node.jsx：

import React, {Component} from 'react';

import './Node.css';

export default class Node extends Component {
    constructor(props){
        super(props);
        this.state = {};
    }

    render(){
        return <div className="node"></div>
    }
}

Answer 1

您应该在其中创建一个html table而不是div，您需要映射一个由<tr>数组组成的<td>数组。

这里是未编译的逻辑示例：

<table>
    {Array(65).fill(0).map(() =>
        (<tr>
            {Array(65).fill(0).map(() =>
                <td></td>
            )}
        </tr>)
    )}
</table>

这只是为了说明逻辑。数字65是您需要根据单元格的宽度以及用户屏幕的总宽度和高度计算出的数字。