时间戳

首页 > 解决方案 > 根据输入动态更改列名

reactjs - 根据输入动态更改列名

问题描述

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

我找到了一种方法来更改页脚（https://developer.microsoft.com/en-us/fabric#/controls/web/detailslist/customfooter）但不是页眉，因为 DetailsHeader 中没有 onRenderItemColumn 道具。

有什么帮助吗？

标签： reactjsoffice-ui-fabric

解决方案

DetailsColumn 组件似乎总是呈现列的 name 属性值：https ://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/DetailsList /DetailsColumn.base.tsx#L122。因此，我认为每次您的“输入”在组件的渲染调用中发生变化时，您都必须动态地重新生成一个新的 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}
    />
  );
}

推荐阅读