Как отобразить элемент в матрице в реакции?

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

На самом деле это не ответный вопрос... Это алгоритмический вопрос... Если вы покажете нам, что из того, что вы пробовали, не сработало, мы можем вам помочь... посмотрите, как спросить: stackoverflow.com/help/как спросить

SakoBu 09.03.2019 22:17

В тот момент я был озадачен как запуском логики внутри синтаксиса jsx, так и частью алгоритма.

LWang 28.01.2021 08:21
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
2
4 981
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Другие вопросы по теме