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

Posted 2023-02-22

【中文标题】如何在 React ui-fabric 库中自定义 GroupedList 组件中的标题

【英文标题】：How to customize the header in GroupedList component in react ui-fabric library

【发布时间】：2019-02-24 21:18:07

【问题描述】：

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

本示例的组件源码可以在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 中写什么来更改标题，所以它的外观和行为就像我在图片中描述的那样。非常感谢您的帮助。

【参考方案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 从原始示例分叉

【讨论】：

感谢您的回答，对我很有帮助。我正在解决一个类似的问题，但我有一个关于布局的问题。你觉得你能帮我吗？ ***.com/q/56084592/918585