React Virtualized: CellRenderer不被调用

Question

我正在使用react虚拟化的表。所有的功能都很好，但是我的定制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

Answer 1

看上去你的Autosizer给出了零高度。其原因是：

关于将AutoSizer与flexbox容器一起使用时要注意的一点。Flex容器不会阻止他们的孩子生长，AutoSizer贪婪地增长以尽可能多地填充空间。将两者结合可能会导致一个循环。解决这个问题的简单方法是将AutoSizer嵌套在块元素(如a)中，而不是将其作为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