React-Virtualized：未调用 CellRenderer

Question

我正在使用 react-virtualized 作为 table。一切正常，但未调用我的自定义 CellRenderer。包含所有必要信息的数据可用，但仅调用 headerRenderer 并且仅呈现 header。 table body 为空。我将 Table 与 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 高度似乎为零。原因是这样的：

One word of caution about using AutoSizer with flexbox containers. Flex containers don't prevent their children from growing and AutoSizer greedily grows to fill as much space as possible. Combining the two can cause a loop. The simple way to fix this is to nest AutoSizer inside of a block element (like a ) rather than putting it as a direct child of the flex container. Read more about common AutoSizer questions here.

因此在您的解决方案中添加 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

React-Virtualized：未调用 CellRenderer

React-Virtualized: CellRenderer isn't called

javascript

reactjs

typescript

react-virtualized