语义 UI 反应网格列顺序答案

【问题标题】：Semantic UI react grid columns order语义 UI 反应网格列顺序
【发布时间】：2019-03-31 15:14:28
【问题描述】：

我有一个有序的复选框列表（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.'

【问题讨论】：

标签： reactjs semantic-ui-react

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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>

    );
  }

【讨论】：