React-Virtualized：不调用CellRenderer

问题描述

我正在为表使用react-virtualized。一切正常，但未调用我的自定义CellRenderer。数据包含所有必需的信息，但是只有headerRenderer被调用，只有标题被渲染。表格主体为空。我正在将表与AutoSizer和MaterialUI一起使用。

我的代码：

import * as React from 'react';
import { default as styled } from 'styled-components';

import { AutoSizer,Column,Table,TableCellRenderer,TableHeaderProps } from 'react-virtualized';

import TableCell from '@material-ui/core/TableCell';

const TableStyles = styled.div`
  .ReactVirtualized__Table__headerRow {
    display: flex;
    align-items: center;
  }

  .ReactVirtualized__Table__row {
    display: flex;
    align-items: center;
  }

  .ReactVirtualized__Table__rowColumn {
    flex: 1;
  }
`;

const VirtualizedTable = () => {

  const cellRenderer: TableCellRenderer = ({ cellData }) => {
    return (
      <TableCell
        variant="body"
        component="div"
        style={{ height: 40 }}
      >
        {cellData}
      </TableCell>
    );
  };

  const headerRenderer = ({ label }: TableHeaderProps & { columnIndex: number }) => {
    return (
      <TableCell
        component="div"
        variant="head"
        style={{ height: 40 }}
      >
        <span>{label}</span>
      </TableCell>
    );
  };

  const data = [
    {
      id: '200',text: "Field 1",},{
      id: '200',text: "Field 2",]
  
  const columns = [
    {
      width: 200,label: 'Id',dataKey: 'id',{
      width: 120,label: 'Text',dataKey: 'text',]

  return (
    <TableStyles>
      <AutoSizer>
        {({ height,width }) => (
          <Table
            headerHeight={40}
            width={width}
            height={height}
            rowHeight={40}
            rowCount={data.length}
            rowGetter={({ index }) => data[index]} 
          >
            {columns.map(({ dataKey,...other },index) => {
              return (
                <Column
                  key={dataKey}
                  headerRenderer={(headerProps) =>
                    headerRenderer({
                      ...headerProps,columnIndex: index,})
                  }
                  cellRenderer={cellRenderer}
                  dataKey={dataKey}
                  {...other}
                />
              );
            })}
          </Table>
        )}
      </AutoSizer>
    </TableStyles>
  );
};

export default VirtualizedTable;

这是CodeSandBox： CodeSandBox

解决方法

似乎您的Autosizer的高度为零。原因是这样的：

关于对flexbox容器使用AutoSizer的警告。 Flex容器不会阻止孩子的成长，而AutoSizer也会贪婪地增长以填充尽可能多的空间。两者结合会导致循环。解决此问题的简单方法是将AutoSizer嵌套在block元素内（如），而不是将其作为flex容器的直接子代。在此处阅读有关AutoSizer常见问题的更多信息。

因此，在您的解决方案中，添加defaultHeight或添加style即可自动调整大小

<AutoSizer defaultHeight={200} style={{ height: "100%" }}>

这里是完整代码：

import * as React from "react";
import { default as styled } from "styled-components";

import {
  AutoSizer,Column,Table,TableCellRenderer,TableHeaderProps
} from "react-virtualized";

import TableCell from "@material-ui/core/TableCell";

const TableStyles = styled.div`
  .ReactVirtualized__Table__headerRow {
    display: flex;
    align-items: center;
  }

  .ReactVirtualized__Table__row {
    display: flex;
    align-items: center;
  }

  .ReactVirtualized__Table__rowColumn {
    flex: 1;
  }
`;

const VirtualizedTable = ({ list }) => {
  const cellRenderer: TableCellRenderer = ({ cellData }) => {
    console.log(cellData);
    return (
      <TableCell variant="body" component="div" style={{ height: 40 }}>
        {cellData}
      </TableCell>
    );
  };

  const headerRenderer = ({
    label
  }: TableHeaderProps & { columnIndex: number }) => {
    return (
      <TableCell component="div" variant="head" style={{ height: 40 }}>
        <span>{label}</span>
      </TableCell>
    );
  };

  const data = [
    {
      id: "200",text: "Field 1"
    },{
      id: "200",text: "Field 2"
    }
  ];

  const columns = [
    {
      width: 200,label: "Id",dataKey: "id"
    },{
      width: 120,label: "Text",dataKey: "text"
    }
  ];

  return (
    <TableStyles>
      <AutoSizer style={{height:"100%"}}>
        {({ height,width }) => console.log(height,width) || (
          <Table
            headerHeight={40}
            width={width}
            height={height}
            rowHeight={40}
            rowCount={data.length}
            rowGetter={({ index }) => data[index]}
          >
            {columns.map(({ dataKey,...other },index) => {
              console.log(dataKey,other);
              return (
                <Column
                  key={dataKey}
                  headerRenderer={(headerProps) =>
                    headerRenderer({
                      ...headerProps,columnIndex: index
                    })
                  }
                  // cellRenderer={(data) => cellRenderer(data)}
                  cellRenderer={({ cellData }) => cellData}
                  dataKey={dataKey}
                  {...other}
                />
              );
            })}
          </Table>
        )}
      </AutoSizer>
    </TableStyles>
  );
};

export default VirtualizedTable;

这里是演示：https://codesandbox.io/s/react-virtualize-table-h1zq6?file=/src/App.tsx