时间戳

首页 > 解决方案 > 导出要在 JSX 标签中使用的 React 组件

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

问题描述

目标：

将 的默认汉堡图标替换为 中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直接从 in进行导入Menu.js并编写customBurgerIcon={<Icon icon={menu} />}它就可以了。我想我尝试导出图标组件的方式一定有问题。

如何解决这个问题？先感谢您！

标签： javascriptreactjs

解决方案

尝试

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

在 Menu.js 中

推荐阅读