javascript - React Virtualized 抛出错误 - TypeError : _reactVirtualized2. 默认未定义

Question

我刚刚在我的项目中集成了react-virtualized。我使用的代码与表演示中使用的代码相同。

https://github.com/bvaughn/react-virtualized/blob/master/source/Table/Table.example.js

只需进行一项更改 - 而不是从

获取数据

    static contextTypes = {
    list: PropTypes.instanceOf(Immutable.List).isRequired
};

我使用了我的虚拟数据列表。

listview.jsx:

/** @flow */
import Immutable from 'immutable';
import React, { Component } from 'react';
import { ContentBox } from 'react-virtualized';
import AutoSizer from 'react-virtualized';
import Column from 'react-virtualized';
import Table from 'react-virtualized';
import SortDirection from 'react-virtualized';
import SortIndicator from 'react-virtualized';
import styles from 'react-virtualized';

export default class listview extends Component {
  constructor (props) {
    super(props);

    this.state = {
      disableHeader: false,
      headerHeight: 30,
      height: 270,
      hideIndexRow: false,
      overscanRowCount: 10,
      rowHeight: 40,
      rowCount: 1000,
      scrollToIndex: undefined,
      sortBy: 'index',
      sortDirection: SortDirection.ASC,
      useDynamicRowHeight: false
    }

    this._getRowHeight = this._getRowHeight.bind(this)
    this._headerRenderer = this._headerRenderer.bind(this)
    this._noRowsRenderer = this._noRowsRenderer.bind(this)
    this._onRowCountChange = this._onRowCountChange.bind(this)
    this._onScrollToRowChange = this._onScrollToRowChange.bind(this)
    this._rowClassName = this._rowClassName.bind(this)
    this._sort = this._sort.bind(this)
  }

  render () {
    var myList = [
    {
      index: 0,
      name : 'arjita',
      random : 'Curabitur eu pellentesque nisl.'
    },
    {
      index: 1,
      name : 'mitu',
      random : 'Etiam non consequat est.'
    }
  ];

    const {
      disableHeader,
      headerHeight,
      height,
      hideIndexRow,
      overscanRowCount,
      rowHeight,
      rowCount,
      scrollToIndex,
      sortBy,
      sortDirection,
      useDynamicRowHeight
    } = this.state

    const { list } = myList;
    const sortedList = this._isSortEnabled()
      ? list
        .sortBy(item => item[sortBy])
        .update(list =>
          sortDirection === SortDirection.DESC
            ? list.reverse()
            : list
        )
      : list

    const rowGetter = ({ index }) => this._getDatum(sortedList, index)

    return (
      <ContentBox>
        <div>
          <AutoSizer disableHeight>
            {({ width }) => (
              <Table
                ref='Table'
                disableHeader={disableHeader}
                headerClassName={styles.headerColumn}
                headerHeight={headerHeight}
                height={height}
                noRowsRenderer={this._noRowsRenderer}
                overscanRowCount={overscanRowCount}
                rowClassName={this._rowClassName}
                rowHeight={useDynamicRowHeight ? this._getRowHeight : rowHeight}
                rowGetter={rowGetter}
                rowCount={rowCount}
                scrollToIndex={scrollToIndex}
                sort={this._sort}
                sortBy={sortBy}
                sortDirection={sortDirection}
                width={width}
              >
                {!hideIndexRow &&
                  <Column
                    label='Index'
                    cellDataGetter={
                      ({ columnData, dataKey, rowData }) => rowData.index
                    }
                    dataKey='index'
                    disableSort={!this._isSortEnabled()}
                    width={60}
                  />
                }
                <Column
                  dataKey='name'
                  disableSort={!this._isSortEnabled()}
                  headerRenderer={this._headerRenderer}
                  width={90}
                />
                <Column
                  width={210}
                  disableSort
                  label='The description label is really long so that it will be truncated'
                  dataKey='random'
                  className={styles.exampleColumn}
                  cellRenderer={
                    ({ cellData, columnData, dataKey, rowData, rowIndex }) => cellData
                  }
                  flexGrow={1}
                />
              </Table>
            )}
          </AutoSizer>
        </div>
      </ContentBox>
    )
  }

  _getDatum (list, index) {
    return list.get(index % list.size)
  }

  _getRowHeight ({ index }) {
    var myList = [
    {
      index: 0,
      name : 'arjita',
      random : 'Curabitur eu pellentesque nisl.'
    },
    {
      index: 1,
      name : 'mitu',
      random : 'Etiam non consequat est.'
    }
  ];
    const { list } = myList;

    return this._getDatum(list, index).size
  }

  _headerRenderer ({
    columnData,
    dataKey,
    disableSort,
    label,
    sortBy,
    sortDirection
  }) {
    return (
      <div>
        Full Name
        {sortBy === dataKey &&
          <SortIndicator sortDirection={sortDirection} />
        }
      </div>
    )
  }

  _isSortEnabled () {
    var myList = [
    {
      index: 0,
      name : 'arjita',
      random : 'Curabitur eu pellentesque nisl.'
    },
    {
      index: 1,
      name : 'mitu',
      random : 'Etiam non consequat est.'
    }
  ];
    const { list } = this.myList;
    const { rowCount } = this.state

    return rowCount <= list.size
  }

  _noRowsRenderer () {
    return (
      <div className={styles.noRows}>
        No rows
      </div>
    )
  }

  _onRowCountChange (event) {
    const rowCount = parseInt(event.target.value, 10) || 0

    this.setState({ rowCount })
  }

  _onScrollToRowChange (event) {
    const { rowCount } = this.state
    let scrollToIndex = Math.min(rowCount - 1, parseInt(event.target.value, 10))

    if (isNaN(scrollToIndex)) {
      scrollToIndex = undefined
    }

    this.setState({ scrollToIndex })
  }

  _rowClassName ({ index }) {
    if (index < 0) {
      return styles.headerRow
    } else {
      return index % 2 === 0 ? styles.evenRow : styles.oddRow
    }
  }

  _sort ({ sortBy, sortDirection }) {
    this.setState({ sortBy, sortDirection })
  }

  _updateUseDynamicRowHeight (value) {
    this.setState({
      useDynamicRowHeight: value
    })
  }
}

我将 listview.jsx 包含在另一个组件中 -

mainComponent.jsx

import React, { Component } from 'react';
import Fileviewer from '../../components/fileviewer/fileviewer';
import Listview from '../../components/fileviewer/listview';

export default class mainComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showComponent : false,
            listComponent : true
        };
    }

    render() {
        return (
            <div>
                <div className="pull-right">
                    <span className="listIconClass glyphicon glyphicon-th-list" onClick={this.onListButtonClick}></span>
                    <a className="tileIconClass glyphicon glyphicon-th" onClick={this.onTileButtonClick}></a>
                    <span className="helpIcon glyphicon glyphicon-info-sign"></span>
                </div>
                <div>
                    {this.state.showComponent ?
                        <Fileviewer /> :
                        null
                    }

                </div>
                 <div>
                    {this.state.listComponent ?
                        <Listview />  :
                        null
                    }
                </div>
            </div>
        );
    }
}

就是这样。但我的 table 还没来。总是遇到同样的错误，

类型错误:_reactVirtualized2.default 未定义

如果我扩大错误，那么 -

listview http://localhost:3000/static/js/bundle.js:97073:8
    ReactCompositeComponent._constructComponentWithoutOwner/< http://localhost:3000/static/js/bundle.js:26146:19
    measureLifeCyclePerf http://localhost:3000/static/js/bundle.js:25926:13
    ReactCompositeComponent._constructComponentWithoutOwner http://localhost:3000/static/js/bundle.js:26145:17
    ReactCompositeComponent._constructComponent http://localhost:3000/static/js/bundle.js:26131:17
    ReactCompositeComponent.mountComponent http://localhost:3000/static/js/bundle.js:26039:17
    ReactReconciler.mountComponent http://localhost:3000/static/js/bundle.js:18490:19
    ReactChildReconciler.updateChildren http://localhost:3000/static/js/bundle.js:25675:36
    ReactMultiChild.Mixin._reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:25197:12
    ReactMultiChild.Mixin._updateChildren http://localhost:3000/static/js/bundle.js:25301:27
    ReactMultiChild.Mixin.updateChildren http://localhost:3000/static/js/bundle.js:25288:8
    ReactDOMComponent.Mixin._updateDOMChildren http://localhost:3000/static/js/bundle.js:22471:8
    ReactDOMComponent.Mixin.updateComponent http://localhost:3000/static/js/bundle.js:22289:6
    ReactDOMComponent.Mixin.receiveComponent http://localhost:3000/static/js/bundle.js:22251:6
    ReactReconciler.receiveComponent http://localhost:3000/static/js/bundle.js:18569:6
    ReactChildReconciler.updateChildren http://localhost:3000/static/js/bundle.js:25663:10
    ReactMultiChild.Mixin._reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:25197:12
    ReactMultiChild.Mixin._updateChildren http://localhost:3000/static/js/bundle.js:25301:27
    ReactMultiChild.Mixin.updateChildren http://localhost:3000/static/js/bundle.js:25288:8
    ReactDOMComponent.Mixin._updateDOMChildren http://localhost:3000/static/js/bundle.js:22471:8
    ReactDOMComponent.Mixin.updateComponent http://localhost:3000/static/js/bundle.js:22289:6
    ReactDOMComponent.Mixin.receiveComponent http://localhost:3000/static/js/bundle.js:22251:6
    ReactReconciler.receiveComponent http://localhost:3000/static/js/bundle.js:18569:6
    ReactCompositeComponent._updateRenderedComponent http://localhost:3000/static/js/bundle.js:26605:8
    ReactCompositeComponent._performComponentUpdate http://localhost:3000/static/js/bundle.js:26575:6
    ReactCompositeComponent.updateComponent http://localhost:3000/static/js/bundle.js:26496:8
    ReactCompositeComponent.receiveComponent http://localhost:3000/static/js/bundle.js:26398:6
    ReactReconciler.receiveComponent http://localhost:3000/static/js/bundle.js:18569:6
    ReactChildReconciler.updateChildren http://localhost:3000/static/js/bundle.js:25663:10
    ReactMultiChild.Mixin._reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:25197:12
    ReactMultiChild.Mixin._updateChildren http://localhost:3000/static/js/bundle.js:25301:27
    ReactMultiChild.Mixin.updateChildren http://localhost:3000/static/js/bundle.js:25288:8
    ReactDOMComponent.Mixin._updateDOMChildren http://localhost:3000/static/js/bundle.js:22471:8
    ReactDOMComponent.Mixin.updateComponent http://localhost:3000/static/js/bundle.js:22289:6
    ReactDOMComponent.Mixin.receiveComponent http://localhost:3000/static/js/bundle.js:22251:6
    ReactReconciler.receiveComponent http://localhost:3000/static/js/bundle.js:18569:6
    ReactCompositeComponent._updateRenderedComponent http://localhost:3000/static/js/bundle.js:26605:8
    ReactCompositeComponent._performComponentUpdate http://localhost:3000/static/js/bundle.js:26575:6
    ReactCompositeComponent.updateComponent http://localhost:3000/static/js/bundle.js:26496:8
    ReactCompositeComponent.performUpdateIfNecessary http://localhost:3000/static/js/bundle.js:26412:8
    ReactReconciler.performUpdateIfNecessary http://localhost:3000/static/js/bundle.js:18601:6
    runBatchedUpdates http://localhost:3000/static/js/bundle.js:18181:6
    TransactionImpl.perform http://localhost:3000/static/js/bundle.js:19511:14
    TransactionImpl.perform http://localhost:3000/static/js/bundle.js:19511:14
    .perform http://localhost:3000/static/js/bundle.js:18120:13
    flushBatchedUpdates http://localhost:3000/static/js/bundle.js:18203:8
    bound  self-hosted:915:17
    TransactionImpl.closeAll http://localhost:3000/static/js/bundle.js:19577:12
    TransactionImpl.perform http://localhost:3000/static/js/bundle.js:19524:12
    ReactDefaultBatchingStrategy.batchedUpdates http://localhost:3000/static/js/bundle.js:28914:15
    batchedUpdates http://localhost:3000/static/js/bundle.js:18128:11
    ReactEventListener.dispatchEvent http://localhost:3000/static/js/bundle.js:29074:8
    bound  self-hosted:957:17

请帮忙!

Answer 1

import { ContentBox } from 'react-virtualized';
import AutoSizer from 'react-virtualized';
import Column from 'react-virtualized';
import Table from 'react-virtualized';
import SortDirection from 'react-virtualized';
import SortIndicator from 'react-virtualized';
import styles from 'react-virtualized';

您的导入是错误的。查看Table docs example :

import { Column, Table } from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once

您可以查看可导入内容的完整列表here .

在您的情况下，您的导入应该看起来更像:

// You don't need this. It isn't exported anyway.
// It's only used in the demo site.
import { ContentBox } from 'react-virtualized';
// Same thing for this.
import styles from 'react-virtualized';
// These are the ones you want:
import {
  AutoSizer,
  Column,
  SortDirection,
  SortIndicator,
  Table
} from 'react-virtualized';