我应用了 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>