0

我有这个 es6 + jsx 代码比工作正常：

// list.js
import React from 'react';
import {
  List,
  Datagrid,
  Filter,
  TextInput,
  NumberField,
  TextField,
} from 'admin-on-rest/lib/mui';

const Filters = props =>
  <Filter {...props}>
    <TextInput source="q" alwaysOn />
  </Filter>
;

export default props => (
  <List {...props} filters={<Filters />} >
    <Datagrid>
      <NumberField source="id" />
      <TextField source="description" />
    </Datagrid>
  </List>
);

我想在单独的源文件中提取过滤器定义。

我试过这样：

// filters.js
import React from 'react';
import {
  Filter,
  TextInput,
  TextField,
} from 'admin-on-rest';

export default props =>
  <Filter {...props}>
    <TextInput source="q" alwaysOn />
  </Filter>
;

和

// list.js
import React from 'react';
import {
  List,
  Datagrid,
  Filter,
  TextInput,
  NumberField,
  TextField,
} from 'admin-on-rest/lib/mui';
import Filters from 'filters';

export default props => (
  <List {...props} filters={<Filters />} >
    <Datagrid>
      <NumberField source="id" />
      <TextField source="description" />
    </Datagrid>
  </List>
);

我认为代码是等效的，但在第二种情况下，我得到了几个

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

最后是这个错误

Uncaught (in promise) 错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件。检查 StatelessComponent.

被起诉的主要是

filters={<Filters />}

但正确的语法是什么？

4

1 回答 1

1

我自己的回答：

我的愚蠢错误，我试图从错误的模块（admin-on-rest 而不是 admin-on-rest/lib/mui）中导入一些组件。

这个问题应该从 StackOverflow 中完全删除，尽管考虑到提出的消息完全具有误导性，它可能很有用。

于 2017-03-09T10:44:02.213 回答