如何使用 JSX 和 Reactstrap（例如 Bootstrap）行和列来布局矩阵？ JSX 不适合我的 Array.prototype.map

Question

我正在尝试在 React 组件中使用 Reactstrap 布局 n x n 矩阵。我的想法是在每一行的开头添加一个 <Row> 元素，并在每一行的末尾添加一个 </Row> 元素。但是我无法让它与 JSX 一起工作，它一直在抱怨 Parsing error: Unexpected token, expected ","

我正在将一个 'characters' 的数组传递给我的组件，并尝试在我的 render 方法中使用 Array.prototype.map 来生成 JSX 布局，布置一个 [=18] 的矩阵=]，每个组件一个。想象一组扑克牌：我只想把它们排成一个正方形。

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>
    }

但我收到以下错误

我明显犯的错误在哪里？感谢您的任何建议...

Answer 1

想出了两种渲染网格的方法。根据您希望定义行的方式，行为会略有不同。

您可以在 Stackblitz 上查看这两种方法的示例。

方法一：

将所有列放在一行中并使用列大小调整道具。

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>
  )
}

方法二：

将列数组缩减为行数组。

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>
  )
}

如何使用 JSX 和 Reactstrap（例如 Bootstrap）行和列来布局矩阵？ JSX 不适合我的 Array.prototype.map

How can I use JSX and Reactstrap (e.g. Bootstrap) Rows and Cols to layout a matrix? JSX is not playing nice with my Array.prototype.map

javascript

jsx

reactjs

reactstrap