我从 react-virtualized 8.11 --> 9.1 升级，并收到上述错误。考虑文档的重大更改：
1-我正在使用 React 版本 0.15.X
2- 我没有使用 CellMeasurer 组件。
除了上述之外，你们中的任何人有没有经历过升级到 react-virtualized 9 的重大变化？升级时我没有做其他更改。
VirtualizedTable.js
import React, { Component, PropTypes } from 'react';
import { AutoSizer, Table, Column, defaultTableRowRenderer } from 'react-virtualized';
import classnames from 'classnames';
import { Input } from 'react-bootstrap';
import 'react-virtualized/styles.css';
// import '../sass/components/virtualized-table.scss';
export default class VirtualizedTable extends Component {
static propTypes = {
schema: PropTypes.shape({
instanceType: PropTypes.string,
searchable: PropTypes.bool,
skeleton: PropTypes.arrayOf(PropTypes.shape({
key: PropTypes.string,
label: PropTypes.string,
display: PropTypes.string,
sortable: PropTypes.bool
}))
}).isRequired,
data: PropTypes.arrayOf(PropTypes.object).isRequired,
onRowClick: PropTypes.func,
rowClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
rowRenderFn: PropTypes.func,
statusRenderFn: PropTypes.func,
actionsRenderFn: PropTypes.func,
sortBy: PropTypes.string,
sortDirection: PropTypes.oneOf(['ASC', 'DESC']),
maxHeight: PropTypes.number
};
constructor(props) {
super(props);
this.state = {
sortBy: 'name',
sortDirection: 'ASC',
tableFilter: ''
};
this.sort = this.sort.bind(this);
this.onFilterChange = this.onFilterChange.bind(this);
}
componentDidMount() {
if (this.props.sortBy) {
this.setState({
sortBy: this.props.sortBy
});
}
if (this.props.sortDirection) {
this.setState({
sortDirection: this.props.sortDirection
});
}
}
sort({ sortBy, sortDirection }) {
if (this.state.sortBy !== sortBy) {
this.setState({ sortBy });
} else {
this.setState({ sortBy, sortDirection });
}
}
onFilterChange (e) {
this.setState({ tableFilter: e.target.value });
}
escapeRegex (str) {
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
}
render() {
const { showFilter } = this.props;
let sortedList = this.props.data;
if (this.state.tableFilter) {
let regex = new RegExp(this.escapeRegex(this.state.tableFilter), 'i');
sortedList = this.props.data.filter(
item => {
let bool = false;
for (let key in item) {
bool = (regex.test(item[key]));
if (bool) break;
}
if (bool) return item;
}
);
}
if (this.state.sortBy) {
sortedList = sortedList.sort(
(a, b) => typeof a[this.state.sortBy] === 'string' ?
a[this.state.sortBy] < b[this.state.sortBy]
:
a[this.state.sortBy] - b[this.state.sortBy]
);
if (this.state.sortDirection === 'DESC') {
sortedList.reverse();
}
}
let columns = this.props.schema.skeleton.filter(item => item.display !== 'hidden');
const rowHeight = this.props.rowHeight || 40;
const headerHeight = this.props.headerHight || 40;
return (
<div className='table-container'>
{
(showFilter) ?
<div className='ac-filter-container' style={{ width: '15%' }}>
<Input
type='text'
onChange={this.onFilterChange.bind(this)}
value={this.state.tableFilter}
placeholder={this.props.filterText || 'Filter results...'}
/>
</div>
:
null
}
<AutoSizer disableHeight>
{({ width: autoWidth }) => {
// Use Static width if provided - NOTE: For Testing Purposes
const width = this.props.width || autoWidth;
return (
<Table
className={classnames('table', {'collapsed': width < 1000})}
width={width}
height={(sortedList.length + 1) * rowHeight > this.props.maxHeight ? this.props.maxHeight : (sortedList.length + 1) * rowHeight}
headerHeight={headerHeight}
rowHeight={rowHeight}
rowClassName={this.props.rowClassName}
rowRenderer={this.props.rowRenderFn || defaultTableRowRenderer}
rowCount={sortedList.length}
rowGetter={({ index }) => sortedList[index]}
sort={this.sort}
sortBy={this.state.sortBy}
sortDirection={this.state.sortDirection}
onRowClick={({index}) => this.props.onRowClick(this.props.data[index])}
>
{
columns.map((column, i) => {
return (
<Column
key={i}
label={column.label}
dataKey={column.key}
disableSort={column.sortable}
width={width / columns.length}
/>
);
})
}
</Table>
);
}}
</AutoSizer>
</div>
);
}
}表容器.js
import React, {Component} from 'react';
// Components
import VirtualizedTable from '../../components/VirtualizedTable3';
import {objects} from '../objects';
import shouldComponentUpdate from '../../utils/shouldComponentUpdate';
export default class TableContainer extends Component {
constructor(props) {
super(props);
this.shouldComponentUpdate = shouldComponentUpdate.bind(this);
}
render() {
let schema = {
instanceType: 'integer',
searchable: true,
skeleton: [{
key: 'id',
label: 'id',
display: 'true',
sotrable: true
}, {
key: 'name',
label: 'name',
display: 'true',
sotrable: true
}]
};
return (
<div className='container'>
<h1>React Virtualized Table</h1>
{
<VirtualizedTable
schema={schema}
data={objects}
onRowClick={() => console.log('U did it!')}
sortByDefault='id'
sortDirection='DESC'
/>
}
</div>
);
}
}