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

这是Reference Error: Layout not defined

上的一个已报告的antd问题。

一种简单的解决方法是导入这样的布局

 import Layout from 'antd/lib/layout'

或者您也可以通过将antd版本更新为“ ^ 3.2.2”或更高版本来进行整理

Answer 2

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

Answer 3

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

正如阿法克·艾哈迈德·汗（Afaq Ahmed Khan）指出的那样：

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

是答案。

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

导入Ant设计组件不起作用

3 个答案: