有沒有拼寫錯誤，但不斷收到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>