使用无限加载器、表、列、自动大小调整器和 CellMeasurer 构建响应式无限滚动表

Question

我刚刚使用InfiniteLoader，Table，Column和AutoSizer完成了一个工作表，我意识到这个表不能随着浏览器窗口的水平缩放。我花了很长时间才完成这项工作，尽管大部分库都有很好的文档记录。我想要实现的是一个类似 HTML 的表格，它根据浏览器窗口的宽度调整大小，随着内容换行垂直增加行高，并使用具有不同行高的无限负载。所有这些要点都可以通过反应虚拟化实现吗？似乎最好先问一下，因为组合这个库的所有移动部分可能很棘手。谢谢！

这是我的组件：

import React from 'react';
import fetch from 'isomorphic-fetch';
import { InfiniteLoader, Table, Column, AutoSizer } from 'react-virtualized';
import { connect } from 'react-redux';
import { CSSTransitionGroup } from 'react-transition-group';
import { fetchProspects } from '../actions/prospects';
import Footer from './footer';
class ProspectsTable extends React.Component {
constructor(props, context) {
super(props, context);
this.renderProspects = this.renderProspects.bind(this);
this.isRowLoaded = this.isRowLoaded.bind(this);
this.loadMoreRows = this.loadMoreRows.bind(this);
this.rowRenderer = this.rowRenderer.bind(this);
this.state = {
remoteRowCount: 200,
list: [
{
fullName: '1 Vaughn',
email: '[e-mail]',
phone: '608 774 6464',
programOfInterest: 'Computer Science',
status: 'Active',
dateCreated: '10/31/2017',
},
{
fullName: '2 Vaughn',
email: '[e-mail]',
phone: '608 774 6464',
programOfInterest: 'Computer Science',
status: 'Active',
dateCreated: '10/31/2017',
},
{
fullName: '3 Vaughn',
email: '[e-mail]',
phone: '608 774 6464',
programOfInterest: 'Computer Science',
status: 'Active',
dateCreated: '10/31/2017',
},
],
};
}
isRowLoaded({ index }) {
return !!this.state.list[index];
}
loadMoreRows({ startIndex, stopIndex }) {
return fetch(`http://localhost:5001/api/prospects?startIndex=${startIndex}&stopIndex=${stopIndex}`)
.then((response) => {
console.log('hi', response);
console.log('hi', this.props);
});
}
rowRenderer({ key, index, style }) {
return (
<div
key={key}
style={style}
>
{this.state.list[index]}
</div>
);
}
render() {
return (
<InfiniteLoader
isRowLoaded={this.isRowLoaded}
loadMoreRows={this.loadMoreRows}
rowCount={this.state.remoteRowCount}
>
{({ onRowsRendered, registerChild }) => (
<div>
<AutoSizer>
{({ width }) => (
<Table
ref={registerChild}
onRowsRendered={onRowsRendered}
width={width}
height={300}
headerHeight={20}
rowHeight={30}
rowCount={this.state.list.length}
rowGetter={({ index }) => this.state.list[index]}
>
<Column
label="Full Name"
dataKey="fullName"
width={width / 6}
/>
<Column
width={width / 6}
label="Email"
dataKey="email"
/>
<Column
width={width / 6}
label="Phone"
dataKey="phone"
/>
<Column
width={width / 6}
label="Program of Interest"
dataKey="programOfInterest"
/>
<Column
width={width / 6}
label="Status"
dataKey="status"
/>
<Column
width={width / 6}
label="Date Created"
dataKey="dateCreated"
/>
</Table>
)}
</AutoSizer>
</div>
)}
</InfiniteLoader>
);
}
}
}
const mapStateToProps = state => ({
prospects: state.prospects,
});
export default connect(mapStateToProps)(ProspectsTable);

这是一个与我的代码非常相似的 plnkr，我经常引用这个：https://plnkr.co/edit/lwiMkw?p=preview

Answer 1

到目前为止，在一个雄心勃勃的项目上做得很好。关于实现剩余目标的一些想法：

1. 根据浏览器窗口的宽度调整大小

   尝试将AutoSizer组件置于此层次结构的顶层，并确保其父组件的宽度随视口而变化。这可以像父divwidth: 100vw一样简单地实现。

2. 随着内容换行而垂直增加行高，并使用具有不同行高的无限负载

   这两者都可以通过根据数据动态设置行高来实现。从TablerowHeight道具上的文档中：

   固定行高(数字

   )或返回给定索引的行高度的函数：({ 索引：数字 })：数字

   React-Virtualized通过提前计算其尺寸来发挥其魔力，因此您将无法flex-wrap功能或其他基于CSS的解决方案正常工作。相反，请确定如何使用给定行的数据(可能还有当前屏幕尺寸)来计算该行的高度。例如：

   const BASE_ROW_HEIGHT = 30;
   const MAX_NAME_CHARS_PER_LINE = 20;
   ...
   getRowHeight = ({ index }) => {
   const data = this.state.list[index];
   // Not a great example, but you get the idea;
   // use some facet of the data to tell you how
   // the height should be manipulated
   const numLines = Math.ceil(fullName.length / MAX_NAME_CHARS_PER_LINE);
   return numLines * BASE_ROW_HEIGHT;
   };
   render() {
   ...
   <Table
   ...
   rowHeight={this.getRowHeight}
   >      
   }
   

为了进一步参考，我发现 React-VirtualizedTable示例的源代码非常有用 - 尤其是有关动态设置行高的行：

_getRowHeight({ index }) {
const { list } = this.context;
return this._getDatum(list, index).size;
}

祝你好运！