Реакция - Используйте вложенные функции карты в функции рендеринга для создания 2D доски / сетки - PullRequest
Новая
       18

Реакция - Используйте вложенные функции карты в функции рендеринга для создания 2D доски / сетки

0 голосов
/ 09 сентября 2018

Я все еще новичок в React и работаю над созданием проекта игры жизни Джона Конвея. Я пытаюсь создать двумерную сетку квадратов, которая будет служить игровым полем для моей игры.

Мой подход заключается в использовании функции карты в рендере / возврате для создания сетки. У меня есть компонент Square.js, который состоит из этого: 

import React, { Component } from 'react';

const Square = () => {
  return (

      <td className="Square"></td>

  );
}

export default Square;

Затем в моем App.js я пытаюсь использовать вложенные функции .map для создания 2D-сетки квадратов. Я успешно создал набор квадратов, идущих по горизонтали, но я изо всех сил стараюсь вложить две функции .map для создания сетки. 

class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      boardHeight: 10,
      boardWidth: 50
    };
  }

  render() {
    return (
      <div>
        <table className="table-board">
          <tbody>
            {Array(this.state.boardHeight).fill(1).map((el, i) => {
              return (
                <Square key={i} />
              );
            })}
          </tbody>
         </table>
      </div>
    );
  }
}

Вот что у меня есть . Если я оберну компонент в строку таблицы следующим образом <tr><Square key={i} /></tr>, я смогу сделать сетку вертикальной.

Как я могу вложить две функции .map, чтобы сделать сетку 2D?

Это то, что я пробовал, но я не могу заставить его работать: 

  return (
      <div>
        <table className="table-board">
          <tbody>
            {Array(this.state.boardHeight).fill(1).map((el, i) => {
              {Array(this.state.boardWidth).fill(1).map((el, j) => {
                return (
                  <div>
                    <tr><Square key={j} /></tr>
                    <Square key={i} />
                  </div>

                );
              })}

            })}
          </tbody>
          </table>
      </div>
    );

Ответы [ 2 ]

0 голосов
/ 20 сентября 2018

Плохие требования

Вы должны рассматривать реагирующий компонент как представление - для состояния рендеринга данного (переданного как prop) массива - не создавая его во время методов / вызовов рендеринга!

Создать массив при запуске (конструктор) и использовать индексы map функций для чтения «ячеек / полей».

Вы можете использовать один линейный массив - length=width*height - одну функцию карты при рендеринге и использовать CSS / стили, чтобы обернуть их в строки по квадратам и ширине доски. Ширина доски может быть предварительно рассчитана в конструкторе (если она не изменена в жизненном цикле) - ширина доски = boardWidth * квадратная ширина - и передана в JSX.

Конечно, вы можете использовать две map функции для создания 2D доски. Его можно использовать для рендеринга с использованием структуры <table/> и <tr/><td> html или из соображений производительности. Со вторым параметром создайте отдельный компонент и передайте часть данных как prop - . Это (почти) не имеет значения, будет ли это отдельный массив (лучше) или диапазон от линейного массива - внутренне Row будет работать над одним простой массив (и один map fn). Это должно зависеть от требований к двигателю.

Ищите вдохновения здесь . У вас более простой случай - вам не нужно возвращать события / ходы.

0 голосов
/ 09 сентября 2018

Ну, вы можете в основном отображать в строке, и это будет проще. Не забудьте связать методы в вашем конструкторе. 

renderRow(el, i) {
    return <tr key={i}> {Array(this.state.boardWidth).fill(1).map(this.renderColumns)} </tr>
}

renderColumn(el, j) {
    return <Square key={j} />
}

render() {
    return {Array(this.state.boardHeight).fill(1).map(this.renderRow)
}
...