语义 UI 反应网格列顺序

Question

我有一个有序的复选框列表 (this.state.columns)：

1。 2. 3. 4. 5. 6. ...

我想在两列中显示此列表，但语义 ui 网格将顺序更改为：

'1.' '2.'

'3.' '4.'

'5.' '6.'

这是我的代码：

<Grid stackable columns={2}>
        {this.state.columns.map(
          data =>
            data.label !== ' ' && (
              <Grid.Column key={data.key}>
                <Field
                  name={data.key}
                  component={fields.field.checkbox}
                  label={data.label}
                  type="checkbox"
                  control={Checkbox}
                />
              </Grid.Column>
            )
        )}
</Grid>

关于如何解决这个问题有什么想法吗？我需要这样显示：

'1.' '4.'

'2.' '5.'

'3.' '6.'

Answer 1

我不确定您是否设置为使用列，但解决它的一种方法是使用网格容器和一系列大小为 6 的网格项。

<Grid container spacing={24}>
        {this.state.columns.filter(d => d.label !== ' ')
          .reduce((map, d, i) => {
            let modulo = Math.ceil(this.state.columns.length/2)
            let row = [d]
            if (i+modulo < this.state.columns.length) {
                row.push(this.state.columns[i+modulo])
            }
            map = map.concatenate(row.map(data => 
                <Grid item key={data.key} xs={6}>
                <Field
                  name={data.key}
                  component={fields.field.checkbox}
                  label={data.label}
                  type="checkbox"
                  control={Checkbox}
                />
              </Grid>))

           }, [])}
</Grid>

Answer 2

一个网格可以有一个 Grid.Row 而这个应该有一个 Grid.Column.

您已将网格定义为有 2 列；这应该让您的前 3 个级别的组件树看起来类似于：

Grid
----Grid.Row
--------Grid.Column（网格列#1）
--------Grid.Column（网格列#2）

GridColumn#1 将包含 this.state.columns 中包含的数据 GridColumn#2 将包含另一半。

对于 GridColumn#1，您可以通过将数组切片到其长度的一半以及从其长度的一半为 GridColumn#2 获得一半。

请注意， 您需要针对 this.state.columns 的数组长度为奇数的情况进行调整。（在下面的示例中，我依靠 Javascript 将浮点数转换为整数）

这是一种实现方法；它可以从一些重构中受益。

  renderCheckboxColumns() {
    const { columns } = this.state
    const leftColumns = columns.slice(0, (columns.length + 1 )/ 2).map(
      data =>
        <Grid.Row>
          <Grid.Column>{data}</Grid.Column>
        </Grid.Row>
    )

    const rightColumns = columns.slice((columns.length + 1)/ 2).map(
      data =>
        <Grid.Row>
          <Grid.Column>{data}</Grid.Column>
        </Grid.Row>
    )

    return (
      <Grid.Row>
        <Grid.Column>
          {leftColumns}
        </Grid.Column>
        <Grid.Column>
          {rightColumns}
        </Grid.Column>
      </Grid.Row>
    );
  }

  render() {
    return (
      <Grid stackable columns={2}>
        {this.renderCheckboxColumns()}
      </Grid>

    );
  }

语义 UI 反应网格列顺序

Semantic UI react grid columns order

reactjs

semantic-ui-react