React.js- 使用 html 动态制作网格
React.js- using html to make grid dynamically
目前我正在从事 FCC 的项目之一,Game of Life
开始之前,我正在研究如何将网格呈现到页面上。
我希望能够更改 table 的尺寸,同时仍保留在 table 所在的容器内。
我正在使用 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;
}
我现在遇到的问题是,虽然我可以轻松更改 table 的维度(通过在 React 中更改 state.width 和 state.height),但它会溢出容器。
换句话说,如果我想把容器设置成固定的长宽,如果我把table的维度设置的比较大,就会溢出。
有什么方法可以覆盖它吗?还是使用 table 不是实现此目标的好选择?
目前我正在从事 FCC 的项目之一,Game of Life
开始之前,我正在研究如何将网格呈现到页面上。
我希望能够更改 table 的尺寸,同时仍保留在 table 所在的容器内。
我正在使用 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;
}
我现在遇到的问题是,虽然我可以轻松更改 table 的维度(通过在 React 中更改 state.width 和 state.height),但它会溢出容器。
换句话说,如果我想把容器设置成固定的长宽,如果我把table的维度设置的比较大,就会溢出。
有什么方法可以覆盖它吗?还是使用 table 不是实现此目标的好选择?