如何在 React ui-fabric 库中自定义 GroupedList 组件中的 header

Question

我在自定义 React ui-fabric 库中的 GroupedList 组件 header 时遇到问题。我想做的是删除复选框和数字计数（包括括号）。单击（灰色）行时，行为应等同于单击 V 形图标（expand/collapse 子项）。在视觉上，这就是我想要做的：

可以找到包含此示例源代码的组件 here。

经过一些研究后，我发现实现我想用这个组件做的事情的唯一方法是将 groupProps 传递给 GroupedList 组件，如下所示：

public render(): JSX.Element {
return (
  <FocusZone>
    <SelectionZone selection={this._selection} selectionMode={SelectionMode.multiple}>
      <GroupedList
        items={_items}
        onRenderCell={this._onRenderCell}
        selection={this._selection}
        selectionMode={SelectionMode.multiple}
        groups={_groups}
        // adding this overrides the default header render 
        groupProps={{
            onRenderHeader: this._onRenderHeader
          }}
      />
    </SelectionZone>
  </FocusZone>
);}


private _onRenderHeader(props: IGroupDividerProps): JSX.Element {
// code to change the header goes here
return (
    <div className={css('ms-GroupedListExample-header', FontClassNames.xLarge)}>
        Group1
    </div>
);}

我只是不知道要在 _onRenderHeader 中写什么来更改 header 所以它的外观和行为就像我在图片中描述的那样。非常感谢帮助。

Answer 1

我过去做过类似的事情，这里是如何在 GroupedList 组件中自定义 header 的建议列表。

首先，您的方向是正确的，onRenderHeader事件是此类自定义的正确切入点。但是我建议自定义现有的 GroupHeader component:

而不是覆盖现有的 header 标记

private _onRenderHeader(props: IGroupDividerProps): JSX.Element {

    //your changes goes here..

    return (
            <GroupHeader  {...props} />
    );
}

要隐藏检查按钮和计数器信息，设置display:none为check和headerCount class这样的名字:

const headerCountStyle = {"display":"none"};
const checkButtonStyle = {"display":"none"};

<GroupHeader styles={{ "check": checkButtonStyle, "headerCount": headerCountStyle }}    {...props}   />

要为组header添加toggle/collapse行为，注册以下事件：

 const onToggleSelectGroup = () => {
        props.onToggleCollapse!(props.group!);
 }


<GroupHeader  {...props}  onToggleSelectGroup={onToggleSelectGroup} />

这是从原始示例

派生出来的 demo

如何在 React ui-fabric 库中自定义 GroupedList 组件中的 header

How to customize the header in GroupedList component in react ui-fabric library

frontend

reactjs

office-ui-fabric