时间戳

首页 > 解决方案 > 如何在反应中渲染矩阵中的元素？

reactjs - 如何在反应中渲染矩阵中的元素？

问题描述

所以我知道如何遍历一个数组并在反应中渲染一个元素。现在我想渲染一个矩阵。我有一个 4*3 矩阵，想根据矩阵中的值渲染方形元素。例如，板 = [[0,2,3,0],[2,2,1,0],[0,0,0,0]]。结果应该呈现一个 4 * 4 的棋盘，由较小的正方形组成，其对应的值在里面。

标签： reactjsmatrixrender

解决方案

您可以在循环内创建另一个循环来呈现子数组。如果board数组中的每个元素都代表一行，则可以将每一行包装在 adiv中以赋予其自己的行，并且单元格与span以保持同一行中的每个单元格内联。

例子

class App extends React.Component {
  state = {
    board: [[0, 2, 3, 0], [2, 2, 1, 0], [0, 0, 0, 0]]
  };

  render() {
    const { board } = this.state;

    return (
      <div>
        {board.map((row, i) => (
          <div key={i}>
            {row.map((col, j) => (
              <span key={j}>{col}</span>
            ))}
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

推荐阅读