Javascript 导出要在JSX标记中使用的React组件

目标：

将

react burger menu

的默认汉堡图标替换为

react icons kit

中的图标。来自前者文档的示例：

<Menu customBurgerIcon={ <img src="img/icon.svg" /> } />

但是，我希望有一个图标模块，并从中导入。因此，上面的示例类似于

问题：

我得到一个错误：“元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。”

我正在导出我的图标，如下所示：

// Icons.js

import React from 'react';
import { Icon } from 'react-icons-kit';
import { menu } from 'react-icons-kit/icomoon/menu';


export const MenuIcon = () => <Icon icon={menu} />;

// Menu.js

import React from 'react';
import { slide as BurgerMenu } from 'react-burger-menu';
import { MenuIcon } from './Icons';

// ...

class Menu extends React.Component {

  // ...

  render() {
    return (
      <BurgerMenu
        isOpen={open}
        onStateChange={state => this.handleStateChange(state)}
        customBurgerIcon={MenuIcon}
      >
    // ...
    );
  }
}

//Icons.js
从“React”导入React；
从“反应图标工具包”导入{Icon}；
从'react icons kit/icomoon/menu'导入{menu}；
导出常量MenuIcon=（）=>；

然后像这样使用它：

// Icons.js

import React from 'react';
import { Icon } from 'react-icons-kit';
import { menu } from 'react-icons-kit/icomoon/menu';


export const MenuIcon = () => <Icon icon={menu} />;

// Menu.js

import React from 'react';
import { slide as BurgerMenu } from 'react-burger-menu';
import { MenuIcon } from './Icons';

// ...

class Menu extends React.Component {

  // ...

  render() {
    return (
      <BurgerMenu
        isOpen={open}
        onStateChange={state => this.handleStateChange(state)}
        customBurgerIcon={MenuIcon}
      >
    // ...
    );
  }
}

//Menu.js
从“React”导入React；
从“反应汉堡菜单”导入{幻灯片作为汉堡菜单}；
从“./Icons”导入{MenuIcon}；
// ...
类菜单扩展了React.Component{
// ...
render（）{
返回(
this.handleStateChange（state）}
自定义图标={MenuIcon}
>
// ...
);
}
}

如果我直接在

Menu.js

中从

react icons kit

导入，并写入

customBurgerIcon={}

，它就会工作。我想我试图导出图标组件的方式一定有问题

如何解决这个问题？提前谢谢你

试试看

 return (
      <BurgerMenu
        isOpen={open}
        onStateChange={state => this.handleStateChange(state)}
        customBurgerIcon={<MenuIcon />}
      >

返回(
this.handleStateChange（state）}
自定义图标={}
>

在Menu.js中