Question

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

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

我试图传递一个ImmutableJS列表作为属性无济于事。我在这里还有其他的东西吗？

如何将数据阵列放入组件？

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

  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

这些行存在问题：

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

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

警告：React.createElement：type无效 - 需要一个字符串（用于内置组件）或类/功能（用于复合组件）但得到：未定义。你可能忘记了从您定义的文件中导出组件。检查TableExample的呈现方法。

可能还有其他问题;在注意到进口不良后，我没有仔细阅读。

Answer 2

作者似乎已添加了一个样式表，该样式表可能会或可能不会在您的附件中正确呈现。随后，作者的源表示例中来自第74-162行的所有内容将无法呈现，而这些内容又通过渲染函数级联破坏组件。

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

您提供数据数组的方法是正确的，并且会导致适当的呈现。

欢呼@brianvaughn和他出色的工作

react-virtualized数据表示例

2 个答案: