在 React-Data-Grid 中对行进行分组时如何设置分组行的样式？答案

【问题标题】：How do you style the grouping rows when you group rows in React-Data-Grid?在 React-Data-Grid 中对行进行分组时如何设置分组行的样式？
【发布时间】：2019-07-09 16:36:11
【问题描述】：

是否可以设置您在所附屏幕截图中看到的分组行的样式？我想做的是提供一个 React 组件来代替它。

Here 是所附屏幕截图的代码框。

屏幕截图显示，代表该分组行的div 的类是react-grid-row-group，而它出现在React-Data-Grid 代码库中的唯一位置是RowGroup.tsx。

const RowGroup = forwardRef<HTMLDivElement, Props>(function RowGroup(props, ref) {
  function onRowExpandToggle(expand?: boolean) {
    const { onRowExpandToggle } = props.cellMetaData;
    if (onRowExpandToggle) {
      const shouldExpand = expand == null ? !props.isExpanded : expand;
      onRowExpandToggle({ rowIdx: props.idx, shouldExpand, columnGroupName: props.columnGroupName, name: props.name });
    }
  }

  function onRowExpandClick() {
    onRowExpandToggle(!props.isExpanded);
  }

  function onClick() {
    props.eventBus.dispatch(EventTypes.SELECT_CELL, { rowIdx: props.idx, idx: 0 });
  }

  const lastColumn = props.columns[props.columns.length - 1];
  const style = { width: lastColumn!.left + lastColumn!.width };
  const Renderer = props.renderer || DefaultBase;

  return (
    <div className="react-grid-row-group" style={style} onClick={onClick}>
      <Renderer {...props} ref={ref} onRowExpandClick={onRowExpandClick} onRowExpandToggle={onRowExpandToggle} />
    </div>
  );
});

export default RowGroup;

因此，如果该组件接收到 renderer 属性，它将使用它来呈现具有上述类名的 div 下的组行。

RowGroup.tsx 的用法基本上在Canvas.tsx 中，Canvas 实例化RowGroup，renderer 属性为this.props.rowGroupRenderer。画布在Viewport.tsx 中呈现。 Viewport 在Grid.tsx 中渲染，Grid 在ReactDataGrid 中渲染。

【问题讨论】：

标签： reactjs react-data-grid

【解决方案1】：

在 React-Data-Grid 的 docs 中，我们看到 prop rowGroupRenderer 描述为

rowGroupRenderer
Function called whenever keyboard key is pressed down

type: func

然而，正如上面问题中所描述的，查看代码，我们可以看到这个道具还控制了当你有一个组时行的样子。

但是，剩下的一个问题是，为什么 ReactDataGrid 的 props 的 TypeScript 类型定义中没有此 prop？

【讨论】：