反应虚拟化数据 Table 示例

Question

我正在尝试实现一个简单的数据 table，如作者此处的示例所示：example

...
export default class TableExample extends Component {
static contextTypes = {
list: PropTypes.instanceOf(Immutable.List).isRequired
};
...

我试图将 ImmutableJS 列表作为属性传递，但无济于事。我还遗漏了什么吗？

如何将数据数组放入组件中？

呈现 table 示例的父组件如下所示：

  render() {
  const list = fromJS(this.props.data);
  console.log(typeof(list)); //this outputs "object"
  console.log(list); // this outputs ImmutableJS list with size of 761
  return (
     <TableExample list={list}/>
     )
  }

我也曾尝试将链接到 this.context 的 TableExample 中 { list } 的所有声明更改为 this.props，但没有成功。任何帮助将不胜感激。

此时Chrome返回的控制台错误：

Warning: React.createElement: type is invalid -- expected a string (for                  
built-in components) or a class/function (for composite components) but     
got: undefined. You likely forgot to export your component from the               
file it's defined in. Check the render method of `TableExample`.

Answer 1

作者似乎包含了一种样式 sheet，您的附件中可能正确呈现也可能不正确。随后，作者源 Table 示例中第 74-162 行的所有内容都将无法呈现，这又会通过渲染函数级联破坏组件。

您可以解决此问题并通过删除第 74-162 行和第 217 行的最终结束标记来验证它。重新加载后，您应该会看到基本的 table。

您提供数据数组的方法是正确的，并且确实产生了适当的呈现。

为 @brianvaughn 和他出色的工作干杯

Answer 2

这些行有问题：

import { ContentBox, ContentBoxHeader, ContentBoxParagraph } from 'react-virtualized';
import { LabeledInput, InputRow } from 'react-virtualized';

这些组件用于 react-virtualized 演示站点。它们未与 react-virtualized NPM dist 打包在一起（因此您无法导入它们）。这是您在上面粘贴的错误消息的原因：

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of TableExample.

可能还有其他问题；注意到错误的导入后，我没有仔细阅读。

反应虚拟化数据 Table 示例

react-virtualized Data Table Example

reactjs

datatable

ecmascript-6

babeljs

react-virtualized