有没有拼写错误，但不断收到React.createElement：类型无效 - 预期字符串

Question

我有一个问题，搜索&通过所有可能的重复看完后我不能明确这个问题..

因此，这里是我在main.js做

import Menu from './components/Menu' //which is Menu.js 
import Item from './components/Item' //which is Item.js 

<Menu> 
    <Menu.Item> 
     Meldungen 
    </Menu.Item> 
    <Menu.Item to="/test"> 
     Aufträge 
    </Menu.Item> 
</Menu> 

这里我Menu.js：

import React, { Component } from 'react' 
export default class Menu extends Component { ... } 

和我Item.js

import React, { Component } from 'react' 
export default class Item extends Component { ... } 

我也试着这样做：

import { Menu } from './components/Menu' 
import { Item } from './components/Item' 

，但仍然收到此错误

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. 

• 这怎么可能是固定的，没有拼写错误。

• 如何才能在我main.js所以我没有导入“项目”再次改变我的代码？

Answer 1

如果被导出的类是默认的，则导入语句应改为

import { Menu } from './components/Menu' 
: 

import Menu from './components/Menu'; 

Answer 2

有从Menu.js.出口没有项目模块因此Menu.Item是未定义的（未导出）。 您可以将Item模块中的代码复制到Menu.js中，并将其导出，而不使用默认值。 或 目录菜单中创建文件

Menu.js 
Item.js 
index.js 

保持Menu.js和项目的.js的是 和内部index.js做到这一点：

import Menu from './Menu.js' 
import Item from './Item.js' 

module.exports = { 
Menu, 
Item 
} 

把它们导入：

import { Menu, Item } from './components/Menu'; 

Answer 3

为什么使用Menu.Item？你正在导入2个完全独立的东西。

import Menu from './components/Menu' //which is Menu.js 
import Item from './components/Item' //which is Item.js 

<Menu> 
    <Item> 
     Meldungen 
    </Item> 
    <Item to="/test"> 
     Aufträge 
    </Item> 
</Menu>