我很难为我的测试项目渲染一个简单的网格。 不想手动创建网格,因为使用更大的网格不仅会很麻烦,而且代码也会困惑,所以我想我应该使用 lodash 来实现这一点。
但是,我似乎无法渲染网格,即使我在开发工具中检查它也是不可见的。有人可以指出我的错误吗?
如有必要,我也可以使用 lodash 以外的其他工具。
这是代码:
import React from 'react';
import _ from 'lodash';
import './game.css';
const GRID = [
[{x: 1, y:3}, {x:2, y:3}, {x:3,y:3}],
[{x: 1, y:2}, {x:2, y:2}, {x:3,y:2}],
[{x: 1, y:1}, {x:2, y:1}, {x:3,y:1}],
]
class Game extends React.Component {
renderGrid() {
return _.map(GRID, row =>{
_.map(row, cell =>{
return <div style={{height: 100 + 'px', width: 100+ 'px'}}> {cell.x}, {cell.y} </div>
})
})
}
render() {
return (
<div className="game">
{this.renderGrid()}
</div>
)
}
}
export default Game;
最佳答案
您不会返回内部 map 结果,一旦您这样做,它就会起作用
renderGrid() {
return _.map(GRID, row =>{
return _.map(row, (cell, index) =>{
return <div key={index} style={{height: 100 + 'px', width: 100+ 'px'}}> {cell.x}, {cell.y} </div>
})
})
}
关于javascript - 使用 lodash 在 React 中渲染网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49147633/