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列；这应该使您的前三个级别的组件树看起来类似于：

Grid
---- Grid.Row
--------- Grid.Column（GridColumn＃1）
--------- Grid.Column（GridColumn＃2）

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

通过将数组切成一半的长度，并从其一半的长度切成GridColumn＃2的长度，可以得到GridColumn＃1的一半。

请注意，您需要针对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反应网格列顺序

2 个答案: