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

Question

我在自定义ui-fabric库中自定义GroupedList组件标头时遇到问题。我想做的是删除复选框和数字计数（包括括号）。单击（灰色）行时，其行为应等同于单击人字形图标（展开/折叠子级）。从视觉上来说，这就是我想要做的：

可以在here中找到带有此示例源代码的组件。

经过研究，我发现实现此组件所需的唯一方法是将groupProps传递给GroupedList组件，如下所示：

for d in [A-Z]/[A-Z]/[A-Z]/[A-Z]/[A-Z]/[0-9][0-9]
do
  [[ -d $d ]] && echo $d : $(ls $d|wc -l)
done

我只是不知道在_onRenderHeader中写什么来更改标题，因此它的外观和行为类似于我在图片中所述。非常感谢您的帮助。

Answer 1

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

首先，您处在正确的轨道上，onRenderHeader事件是此类定制的正确切入点。 但是，我建议替代现有的标头标记，而不是自定义现有的GroupHeader component：

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

    //your changes goes here..

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

要隐藏检查按钮和计数器信息，请为display:none和check类名设置headerCount，如下所示：

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

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

要添加组头的切换/折叠行为，请注册以下事件：

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


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

这是原始示例中的demo分叉