根据输入动态更改列名

Question

我正在使用 Office UI 构造详细信息列表组件 (https://developer.microsoft.com/en-us/fabric#/controls/web/detailslist)。是否可以根据详细列表的输入更改列 header 名称？

我找到了一种更改页脚的方法(https://developer.microsoft.com/en-us/fabric#/controls/web/detailslist/customfooter)，但没有 Header，因为 DetailsHeader 中没有 onRenderItemColumn 属性。

有什么帮助吗？

Answer 1

DetailsColumn 组件似乎总是呈现列的名称属性值：https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx#L122。因此，我认为每次 "inputs" 在组件的渲染调用中发生变化时，您都必须动态重新生成一个新的 IColumn 定义数组。

MyComponent:

state = { replaceSpaces: false, spaceReplacementChar: '_' };
columns = [{ name: 'Column 1', minWidth: 100, ... }];

...

getColumns(state) {
  return this.columns.map((column) => {
    return {
      ...column,
      name: state.replaceSpaces 
        ? column.name.replace(/\s/g, state.spaceReplacementChar)
        : column.name
    };
  });
}

...

render() {
  return (
    <DetailsList
      columns={this.getColumns(this.state)}
      {...this.othertableProps}
    />
  );
}

根据输入动态更改列名

Dynamically change the column name based on inputs

reactjs

office-ui-fabric