Question

我正在尝试创建一个Web部件，以使用DetailList组件从列表中呈现项目。当它停留在文档中时，DetailList组件将收到一个column属性，其中包含将要呈现的列。

在我的Web部件中，我以这种方式实现了该组件：

我为column对象创建了一个状态，为compactColumns创建了另一个状态。 compactColumns的想法是维护列对象的较短版本：

this.state = {
  columns: columns,
  compactColumns: columns
};

列对象是一个提取物，它有很多列，是这样的：

const columns: IColumn[] = [
  {
    key: 'FrameworkName',
    name: 'Framework Name',
    fieldName: 'Title',
    minWidth: 150,
    maxWidth: 150,
    isRowHeader: true,
    isResizable: true,
    isSorted: true,
    isSortedDescending: false,
    sortAscendingAriaLabel: 'Sorted A to Z',
    sortDescendingAriaLabel: 'Sorted Z to A',
    data: 'string',
    isPadded: true
  },
  {
    key: 'Customer',
    name: 'Customer',
    fieldName: 'Customer',
    minWidth: 130,
    maxWidth: 130,
    isRowHeader: true,
    isResizable: true,
    isSorted: true,
    isSortedDescending: false,
    sortAscendingAriaLabel: 'Sorted A to Z',
    sortDescendingAriaLabel: 'Sorted Z to A',
    data: 'string',
    isPadded: true
  },
  {
    key: 'ContactPerson',
    name: 'Contact Person',
    fieldName: 'ContactPerson',
    minWidth: 120,
    maxWidth: 120,
    isRowHeader: true,
    isResizable: true,
    isSorted: true,
    isSortedDescending: false,
    sortAscendingAriaLabel: 'Sorted A to Z',
    sortDescendingAriaLabel: 'Sorted Z to A',
    data: 'string',
    isPadded: true
  },]

然后在render方法中，我使用实现列对象的DetailList组件：

<DetailsList
              items={this.state.originalItems}
              columns={columns}
              setKey="set"
              layoutMode={DetailsListLayoutMode.justified}
              isHeaderVisible={true}
              selection={this._selection}
              selectionPreservedOnEmptyClick={true}
            />

这很好用，但是因为列对象中有10列，所以它们没有放置到位，用户需要向右滚动。

为避免这种情况，我创建了两个按钮：一个显示一个精简版本，另一个显示所有列。

<div className="ms-Grid-col ms-lg3 ms-xl3">
          <a className={styles.button} href="#" onClick={() => this._renderCompact(1)}>
          <span className={styles.label}>Compact</span>
          </a>
        </div>

        <div className="ms-Grid-col ms-lg3 ms-xl3">
        <a className={styles.button} href="#" onClick={() => this._renderCompact(0)}>
        <span className={styles.label}>Extended</span>
        </a>
        </div>

按钮调用需要值的_renderCompact（）方法。该值仅用于检查单击了哪个按钮。

_renderCompact（）方法是这样：

private _renderCompact(value: number): any {
if (value == 1) {
  let compact = this.state.compactColumns;

  compact = compact.slice(0, 5);
  this.setState({
    columns: compact
  });
} else {
  this.setState({
    columns: this.state.columns
  });

}

}

如果单击的按钮是紧凑型按钮，它将发送一个值（1），我将compactColumn状态保存在变量中，然后在其上应用切片。之后，我更新了列的状态。如果在usr单击按钮时发送的值不是1，则尝试将列的原始状态设置为back。这里的问题是，当用户单击向该方法发送1的按钮时，列状态得到更新（这也是我想要的），DetailList呈现新的列数。但是由于状态已更改并且包含新的列数，因此当用户单击按钮以查看所有列时，DetailList呈现的列数是更新的版本，而不是原始版本。

所以问题是，当用户单击应该显示所有列的按钮时，如何返回到原始状态？

或者，是否可以将对象有条件地传递给DetailList的column属性？像这样的东西：

          <DetailsList
              items={this.state.originalItems}
              columns={columns OR compactColumns} />

最好的问候美国

在DetailList Fabirc UI中呈现不同数量的列

0 个答案: