Javascript 没有拼写错误，但继续获取React.createElement:类型无效--应为字符串

我有一个问题，在搜索并阅读了所有可能的副本后，我无法澄清此问题

下面是我在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>

和my 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中再次导入“Item”

---

如果要导出的类是默认类，则应改为使用import语句

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

import Menu from './components/Menu';

---

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

Menu.js
Item.js
index.js

保持Menu.js和Item.js不变 在index.js中，您可以执行以下操作：

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

module.exports = {
Menu,
Item
}

现在导入它们：

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

---

为什么要使用

菜单项

？您正在导入两个完全独立的内容

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>

import Menu from./components/Menu'//即Menu.js
从“./components/Item”//导入项，该项为Item.js
梅尔登根
奥夫特拉格

导入不需要是从“/file”导入{Menu}吗？是的，如果不是的话，webpack在构建hanks之前已经抛出了一个错误，但这是我在main.js代码中的第一行-添加的花括号是因为尝试了另一种导入方法客户想要它，就像客户错了一样，这不是你能做的事。这让我不禁要问：为什么客户需要某个特定的（错误的）语法？

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>