导入 Ant Design Component 不起作用

Question

我对我目前遇到的这个问题感到震惊。我所有的逻辑都停止了。在我没有改变任何东西的情况下，有些东西开始不起作用。我的意思是我什至在生产中使用了相同的代码，但在本地它开始无法正常工作，无中生有。即使当我回到以前的提交时，我 100% 确定它在工作，它也不起作用。

Meteor、React、Ant-Design。请帮忙！

错误是：ReferenceError: Layout is not defined

代码是：

import React from 'react';
import Blaze from 'meteor/gadicc:blaze-react-component';
import { Link } from 'react-router-dom';
import { Layout, Menu } from 'antd';
const { Header, Content, Footer } = Layout;

class LayoutContainer extends React.Component {
  render() {

    const { match, children } = this.props;
    const pathname = match.location.pathname;

    return (
      <Layout className="layout">
        <Header style={{backgroundColor: '#fff'}}>
          <Menu
            selectedKeys={[pathname]}
            mode="horizontal"
            style={{ lineHeight: '64px', float: 'right' }}
          >
            <Menu.Item key={'/'}>
              <Link to="/">Home</Link>
            </Menu.Item>
            <Menu.Item key={'/create-a-gathering'}>
              <Link to="/create-a-gathering">Create</Link>
            </Menu.Item>
          </Menu>
          <div className="logo" />
          <Blaze template="loginButtons" />
        </Header>
        <Content style={{ marginTop: 20 }}>
          {children}
        </Content>
        <Footer style={{ textAlign: 'center' }}>

        </Footer>
      </Layout>
    )
  }
}

export default LayoutContainer;

Answer 1

这可以通过删除 node-modules 文件夹然后重建整个项目来解决。

Answer 2

这是一个报告的 antd 问题 Reference Error: Layout not defined

解决这个问题的一个简单方法是像这样导入布局

 import Layout from 'antd/lib/layout'

或者你也可以通过更新antd版本到“^3.2.2”或以上来解决

Answer 3

我早就应该回答这个问题了，但现在是这样：

正如 Afaq Ahmed Khan 指出的那样（也是）：

import { Layout, Menu } from 'antd/lib';

就是答案。

我猜两个包中的 babel 相互冲突，因此 '/lib' 到 root '/' 别名不起作用。

导入 Ant Design Component 不起作用

Importing Ant Design Component doesn't work

npm

meteor

reactjs

meteor-react

antd