Question

我有一个问题，搜索后＆amp;阅读所有可能的重复，我无法清除这个问题..

所以这就是我在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中再次导入“Item”？

Answer 1

如果要导出的类是default，那么import语句应该是

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

import Menu from './components/Menu';

Answer 2

没有从Menu.js导出的Item模块。因此，Menu.Item未定义（未导出）。您可以从Menu.js中的项目模块中复制代码，也可以在不使用默认值的情况下将其导出。要么在目录菜单中创建文件

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';

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>

得到没有拼写错误，但继续得到React.createElement：类型无效 - 期望一个字符串

3 个答案: