React.js-使用HTML，使电网动态

目前我的工作FCC的工程之一，Game of Life React.js-使用HTML，使电网动态

在开始之前，我的工作只是如何使电网到页面上。

我希望能够改变表的尺寸，同时仍保持在保留该表它在容器内。

我使用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> 
    ) 
    } 
}

这是它被从阵营呈现：

<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; 
}

我现在有正确的问题是，尽管我可以c轻松地改变表的维度（通过改变React中的state.width和state.height），它会溢出容器。

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

有没有办法我可以重写这个？还是使用表格不是一个很好的选择来实现这个目标？

来源

2016-09-13 Alejandro

React.js-使用HTML，使电网动态

回答

相关问题