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

你没有返回内部地图结果，一旦你这样做它就会起作用

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

Answer 2

在您的情况下，数组buildin map功能应该足够了不要忘记为地图中的每个元素提供一个唯一的键

提示：

items.map(item => item)是items.map(item => { return(item); })
如果您将数字设置为内联css样式，则'px'单位将用作默认值。

根据您的输入：

class Game extends Component {
  render() {
    return (
      <div className="game">
      {
        GRID.map((row, rowIdx) => (
          row.map((cell, cellIdx) => (
            <div 
              key={`${rowIdx}-${cellIdx}`}
              style={{ height: 100, width: 100 }} 
            >
            {cell.x}, {cell.y}
            </div>
          ))
        ))
      }
      </div>
    );
  }
}

此代码有codeandbox演示：https://codesandbox.io/s/2px4znwopr

希望这个答案有所帮助。

Answer 3

使用bootstrap渲染网格的完整解决方案：

 renderGrid() {
        return _.map(GRID, row => {
            return <div className="row"> {_.map(row, cell => {
                return <div style={{ height: 100 + 'px', width: 100 + 'px' }}> {cell.x}, {cell.y} </div>
            })
            } </div>
        })
    }

使用lodash在React中渲染网格

3 个答案: