javascript - 使用 lodash 在 React 中渲染网格

Question

我很难为我的测试项目渲染一个简单的网格。不想手动创建网格，因为更大的网格不仅是一件苦差事，而且代码会很困惑，所以我想我应该为此使用 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;

Answer 1

您不会返回内部 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>
            })
        })
    }

Working codesandbox