Как сделать элемент в матрице реагировать? - PullRequest
Новая
       46

Как сделать элемент в матрице реагировать?

1 голос
/ 10 марта 2019

Так что я знаю, как перебирать массив и отображать элемент в реакции. Теперь я хочу сделать матрицу. Я имею матрицу 4 * 4 и хочу визуализировать квадратный элемент на основе значения в матрице. Например, доска = [[0,2,3,0], [2,2,1,0], [0,0,0,0]]. Результат должен отобразить доску 4 * 4, сделанную из меньших квадратов, с соответствующим значением внутри.

1 Ответ

1 голос
/ 10 марта 2019

Вы можете создать еще один цикл внутри вашего цикла для рендеринга вложенных массивов. Если каждый элемент в массиве board представляет строку, вы можете заключить каждую строку в div, чтобы присвоить ей собственную строку, и ячейки с помощью 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>
...