Javascript 反应虚拟化：CellRenderer不'；我没打电话

我正在使用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;

import*as React from'React'；
从“样式化组件”导入{defaultasstyled}；
从“react virtualized”导入{AutoSizer，Column，Table，TableCellRenderer，TableHeaderProps}；
从“@material ui/core/TableCell”导入TableCell；
const TableStyles=styled.div`
.react虚拟化\uuuu表\uuuu头错误{
显示器：flex；
对齐项目：居中；
}
.react虚拟化\uuuu表\uuuu行{
显示器：flex；
对齐项目：居中；
}
.ReactVirtualized__表__行列{
弹性：1；
}
`;
const VirtualizedTable=（）=>{
常量cellRenderer:TableCellRenderer=（{cellData}）=>{
返回(
{cellData}
);
};
常量headerRenderer=（{label}:TableHeaderProps&{columnIndex:number}）=>{
返回(
{label}
);
};
常数数据=[
{
id:'200'，
文本：“字段1”，
},
{
id:'200'，
文本：“字段2”，
},
]
常量列=[
{
宽度：200，
标签：“Id”，
数据键：“id”，
},
{
宽度：120，
标签：“文本”，
数据键：“文本”，
},
]
返回(
您的
Autosizer
似乎将高度设为零。原因如下：

关于将AutoSizer与
flexbox
容器一起使用，有一点需要注意。Flex容器不会阻止其子容器的增长，AutoSizer会贪婪地增长以尽可能多地填充空间。。将两者结合起来可能会导致循环。解决此问题的简单方法是将AutoSizer嵌套在块元素（如a）中与其将其作为flex容器的直接子容器，不如在此处阅读有关AutoSizer常见问题的更多信息

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

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


你能添加你的代码吗？如果代码有live PlayGround，那么调试就很容易了。我已经添加了一个指向我的沙盒的链接。谢谢你的建议。啊，我已经更新了你以前看到的沙盒。你能再检查一下吗？Perfet，现在可以了！默认高度适合我。这不是最好的，因为我也想使用自动设定器来设定高度，但是现在主体已呈现。谢谢！这是因为您看到了
列表
的示例。在您的案例中，表格不采用默认高度。这就是为什么在样式中添加
最小高度
，并将
默认高度
作为道具。由于flex，它默认不采用高度。
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;