React.js- 使用 html 动态制作网格答案

【问题标题】：React.js- using html to make grid dynamicallyReact.js- 使用 html 动态制作网格
【发布时间】：2016-09-14 06:11:27
【问题描述】：

目前我正在从事 FCC 的一个项目，Game of Life

在开始之前，我正在研究如何将网格呈现到页面上。

我希望能够更改表格的尺寸，同时仍然保留在它所在的容器内。

我使用 Materialize.css 作为 CSS 框架。

组件：

import React, { Component } from 'react'

export default class Example extends Component {
  constructor(props){
    super(props);
    this.state = {height: 3, width: 3}
  }
  render(){
    let rows = [];
    for (var i = 0; i < this.state.height; i++){
      let rowID = `row${i}`
      let cell = []
      for (var idx = 0; idx < this.state.width; idx++){
        let cellID = `cell${i}-${idx}`
        cell.push(<td key={cellID} id={cellID}></td>)
      }
      rows.push(<tr key={i} id={rowID}>{cell}</tr>)
    }
    return(
      <div className="container">
        <div className="row">
          <div className="col s12 board"></div>
            <table id="simple-board">
               <tbody>
                 {rows}
               </tbody>
             </table>
          </div>
      </div>
    )
  }
}

这是从 React 渲染出来的：

  <div className="container">
    <div className="row">
      <div className="col s12 board"></div>
        <table id="simple-board">
          <tbody>
            <tr id="row0">
              <td id="cell0-0"></td>
              <td id="cell0-1"></td>
              <td id="cell0-2"></td>
            </tr>
            <tr id="row1">
              <td id="cell1-0"></td>
              <td id="cell1-1"></td>
              <td id="cell1-2"></td>
            </tr>
            <tr id="row2">
              <td id="cell2-0"></td>
              <td id="cell2-1"></td>
              <td id="cell2-2"></td>
            </tr>
          </tbody>
        </table>
      </div>
  </div>

CSS

table {
  width: 100%;
  table-layout: fixed;
  overflow: hidden;
}

td{
  width: 33.33%;
  position: relative;
  color: #101935;
  background: #F2FDFF;
  border: 4px solid #DBCBD8;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.5s ease-out, color 0.5s ease-out;
}

td:hover{
  background: #564787;
}

我现在遇到的问题是，虽然我可以轻松更改表格的尺寸（通过更改 React 中的 state.width 和 state.height），但它会溢出容器。

换句话说，如果我想将容器设置为固定的长度和宽度，并且如果我将表格的尺寸设置为相对较高的数字，它将溢出。

有没有办法可以覆盖它？还是使用 table 不是实现这个目标的好选择？

【问题讨论】：

标签： javascript html css reactjs css-tables