Как я могу использовать JSX и Reactstrap (например, Bootstrap) Rows и Cols для компоновки матрицы?JSX плохо играет с моим Array.prototype.map - PullRequest
Новая
       32

Как я могу использовать JSX и Reactstrap (например, Bootstrap) Rows и Cols для компоновки матрицы?JSX плохо играет с моим Array.prototype.map

0 голосов
/ 07 октября 2018

Я пытаюсь расположить матрицу nxn , используя Reactstrap в компоненте React.Я думал добавить элемент <Row> перед началом каждой строки и </Row> в конце каждой строки.Но я не могу заставить его работать с JSX, который продолжает жаловаться Parsing error: Unexpected token, expected ","

Я передаю массив 'символов' своему компоненту и пытаюсь использовать Array.prototype.map в моем методе render длясгенерируйте макет JSX, выложив матрицу CharacterCards, по одной для каждого компонента.Представьте себе набор игральных карт: я просто хочу разложить их в квадрат. 

render() {
    const {props: {characters, rowSize, cardSize}} = this
    const rowUnit = 12 / rowSize

    const cardLayout = characters.map((character, i) => {
      let isRow = (i % rowSize === 0)
      let isRowFinish = ((i + 1) % rowSize === 0)
      return (
        {isRow && <Row>}
        <Col xs='6' md={rowUnit}>
          <CharacterCard key={i + Math.random()}
                         character={character}
                         cardSize={cardSize}
          />
        </Col>
        {isRowFinish && </Row>}
        )

        })

        return <div>
          <Container>
            {cardLayout}
          </Container>
        </div>
    }

, но получаю следующую ошибку

enter image description here

Где ошибка, которую я явно делаю?Спасибо за любой совет ...

1 Ответ

0 голосов
/ 07 октября 2018

Придумали два способа визуализации вашей сетки.Существует небольшое различие в поведении в зависимости от того, как вы хотите определить строки.

Вы можете увидеть пример обоих подходов на Stackblitz .

Метод1:

Поместите все столбцы в одну строку и используйте параметры размера столбцов. 

export default ({ characters, cardSize, rowSize }) => {
  const rowUnit = 12 / rowSize;
  const cardLayout = characters
    .map((character, i) => (
        <Col xs={6} sm={rowUnit} key={`col-${i}`}>
          <CharacterCard
            key={i + Math.random()}
            character={character}
            cardSize={cardSize}
          />
        </Col>
      )
    )

  return (
    <div>
      <Container>
        <Row>
        {cardLayout}
        </Row>
      </Container>
    </div>
  )
}

Метод 2:

Сократите массив столбцов в массив строк. 

export default ({ characters, cardSize, rowSize }) => {
  const rowUnit = 12 / rowSize;
  const cardLayout = characters
    .map((character, i) => (
        <Col sm={rowUnit} key={`col-${i}`}>
          <CharacterCard
            key={i + Math.random()}
            character={character}
            cardSize={cardSize}
          />
        </Col>
      )
    )
    .reduce((rows, col, index) => {
      let currentRow
      if (index % rowSize === 0) {
        currentRow = [];
        rows.push(currentRow)
      } else {
        currentRow = rows[rows.length - 1]
      }
      currentRow.push(col)
      return rows;
      }, []
    )
    .map((cols, i) => <Row key={`row-${i}`}>{...cols}</Row>)

  return (
    <div>
      <Container>
        {cardLayout}
      </Container>
    </div>
  )
}
...