我想在反应中创建一个类似结构的网状表

Question

I am creating a page where I need to show a table having rows and columns like structure and also need to add numbers inside the cells in the table. It has width and height also for the designing perspective.

But I have no idea how to implement the structure in react.

I am adding a prototype of what I have to create in my project.

What should be the best way to implement this so that I can able to show the colors and numbers.

Answer 1

You can use a table

const rows = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

<table>
  {rows.map(cells => {
    return (
      <tr>
        {cells.map(cellData => <td>{cellData}</td>)}
      </tr>
     );
  })}
</table>

Or use divs, if you don't need a table.