1

我应用了 react-window 设置,但我不知道为什么它不会显示单元格的结果。

这就是我为反应窗口渲染孩子的方式

这就是我如何应用 Reactwindow import { VariableSizeList as List } from 'react-window'

 const renderBodyColumn = (cell: any, row: any, renderRowSubComponent: any) => {
  const classTd = classname({
    td: true,
    [cell.column.columnClassName]: cell.column.columnClassName
  })
  const styles = {
    flex: cell.column.width + ' 0 auto',
    width: cell.column.width,
    maxWidth:
      cell.column.maxWidth && cell.column.maxWidth <= 1000
        ? cell.column.maxWidth + 'px'
        : 'auto'
  }

  const RenderRow = ({ index, style }) => {
    return (
      <div style={style} key={index}>
        {cell.render('Cell')}
      </div>
    )
  }
  return (
    <div {...cell.getCellProps()} className={classTd} style={{ ...styles }}>
      <List
        height={50}
        itemCount={row.length}
        itemSize={(index) => (index % 2 ? 100 : 100)}
      >
        {RenderRow(cell)}
      </List>
      {renderRowSubComponent && renderRowSubComponent
        ? renderRowSubComponent({ row })
        : ''}
    </div>
  )
}

这是道具的应用代码

<div className='tbody' {...getTableBodyProps()}>
    {page.map((row: any, index: number) => {
        prepareRow(row)
        return (
            <div className='tr' key={index} {...row.getRowProps()} {...getTrProps(row)}>
            {row.cells.map((cell: any, index: number) => {
                return (
                <React.Fragment key={index}>
                    {renderBodyColumn(cell, row, renderRowSubComponent)}
                </React.Fragment>
                )
            })}
            </div>
        )
    }
</div>
4

0 回答 0