React / MaterialUI - 使用相同的名称导入和导出

Question

我想创建名为“Menu”的组件并从MaterialUI导入“Menu”，如下所示：

import React, {Component} from 'react';
import Menu from '@material-ui/core/Menu';

class Menu extends Component {

    render() {
        return (
            <div>
                <Menu>
                    ...
                </Menu>
            </div>
        );
    }
}

export default Menu;

我怎样才能做到这一点？我尝试使用import {Menu as OtherName}等，但所有时间我都有错误。

谢谢你的建议。

Answer 1

您有两种选择：

import { default as materialMenu } '@material-ui/core/Menu';

要么

export { myComponent as Menu };

Answer 2

以下是导出和导入的两种方案

如果使用默认值导出组件，则可以将组件导入为

   import Menu from ‘./Menu’;

默认导出：

   export default class Menu extends Component{
       ........

       ........
   }

如果导出没有默认值的组件，则可以将组件导入为

   import {Menu} from ‘./Menu’;

导出无默认值：

   export class Menu extends Component{
       ........

      ........
   }