ReactJS - отображение сетки на всей веб-странице

Question

Я пытаюсь отобразить сетку на всей веб-странице, состоящей из маленьких ячеек с одинаковой высотой / шириной, как в примере, показанном ниже, и я ищу способ сделать это, так как это мой первый проект реагирования:

это 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>.

. некомпилированный пример логики c:

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

Это просто для иллюстрации логики c. Числа 65 - это то, что вам нужно будет вычислить на основе ширины ваших ячеек, а также общей ширины и высоты пользовательского экрана.