我正在尝试使用react-virtualized实现自然表排序。我在github仓库上有一个例子。一旦我的代码中有了表格,就无法生成表格。我可以console.log我的道具和状态,但不能在桌子上。我不确定发生了什么。如果有人可以指出一篇好文章,那么对react-virtualized做出一个自然表排序将不胜感激。
代替使用数组解构,我只是简单地创建了一个新变量并分配了this.props。我也尝试过简单地称呼州。
componentWillUpdate(nextProps, nextState) {
const { sortBy: prevSortBy, sortDirection: prevSortDirection } = this.state;
if (
nextState.sortBy !== prevSortBy ||
nextState.sortDirection !== prevSortDirection
) {
const { sortBy, sortDirection } = nextState;
let { lists } = this.props;
if (sortBy) {
lists = lists.sortBy(item => item[sortBy]);
if (sortDirection === SortDirection.DESC) {
lists = lists.reverse();
}
}
}
}
render() {
const { lists , sortBy, sortDirection } = this.state;
return (
<Table
{...this.props}
sort={this._sort}
sortBy={sortBy}
rowHeight={400}
rowCount={100}
width={400}
sortDirection={sortDirection}
style={styles}
rowGetter={({ index }) => this.props.lists[index]}
height={400}
>
{/* <Column>s go here */}
<Column label="Name" dataKey="name" width={100} />
<Column label="Name" dataKey="email" width={100} />
<Column width={200} label="Description" dataKey="account" />
</Table>
);
}
_sort({ sortBy, sortDirection }) {
const { sortBy: prevSortBy, sortDirection: prevSortDirection } = this.state;
// If list was sorted DESC by this column.
// Rather than switch to ASC, return to "natural" order.
if (prevSortDirection === SortDirection.DESC) {
sortBy = null;
sortDirection = null;
}
this.setState({ sortBy, sortDirection });
}
}
export default NaturalSortTable;
列表已声明但未使用过。