ES6反应我如何在其他文件中提取const组件失败

Question

我的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：类型是无效的 - 期望字符串 （用于内置组件）或类/功能（用于复合 组件），但得到：未定义。您可能忘记出口 该文件中定义的组件。

最后这个错误

未被发现（在承诺中）错误：元素类型无效：预期 字符串（用于内置组件）或类/功能（用于复合 组件），但得到：未定义。您可能忘记出口 从其定义的文件中的组件。检查 StatelessComponent。

主要被起诉的是

filters={<Filters />}

但是，正确的语法是什么？

Answer 1

我的自我答案：

我的愚蠢错误，我尝试从错误的模块中导入某些组件（admin-on-on-on-on-on-on-on-on-on-on-on-in-lib/mui）。

考虑到完全误导的消息可能有用。