1

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

...
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 链接到 this.props 的 TableExample 中 { list } 的所有声明，但没有取得多大成功。任何帮助将不胜感激。

此时 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`.
4

2 回答 2

3

这些行是有问题的：

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

这些组件用于 react-virtualized 演示站点。它们没有与 react-virtualized NPM dist 打包在一起（所以你不能导入它们）。这是您在上面粘贴的错误消息的原因：

警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件。检查TableExample.

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

于 2017-01-25T23:47:40.990 回答
1

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

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

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

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

于 2017-01-25T23:34:11.047 回答