Question

目标：

用react-burger-menu中的图标替换默认的汉堡图标react-icons-kit。前者的文档示例：

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

但是，我想要一个图标模块并从中导入。因此，上面的示例类似于<Menu customBurgerIcon={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}
      >
    // ...
    );
  }
}

如果我直接在react-icons-kit中从Menu.js进行导入并写成customBurgerIcon={<Icon icon={menu} />}，它就可以工作。我想我导出图标组件的方式一定有问题。

如何解决此问题？预先谢谢你！

Answer 1

尝试

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

在Menu.js中

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

1 个答案: