无法读取未定义的属性“组件”

时间:2018-07-30 11:57:01

标签: reactjs antd

每当我想使用Ant design Component时,都会出现以下错误:

antd.min.js:23 Uncaught TypeError: Cannot read property 'Component' of undefined
    at Object.<anonymous> (antd.min.js:23)
    at t (antd.min.js:7)
    at Object.<anonymous> (antd.min.js:31)
    at t (antd.min.js:7)
    at Object.<anonymous> (antd.min.js:50)
    at t (antd.min.js:7)
    at Object.<anonymous> (antd.min.js:7)
    at t (antd.min.js:7)
    at antd.min.js:7
    at antd.min.js:7

我使用最新版本(3.7.3)

在这一部分中,我使用了Layout Component的蚂蚁设计:

import React, {Component} from 'react';

import ReactDOM from 'react-dom';

import { Layout, Menu, Icon } from 'antd';

const { Header, Content, Footer, Sider } = Layout;

ReactDOM.render(
  <Layout>
    <Sider
      breakpoint="lg"
      collapsedWidth="0"
      onBreakpoint={(broken) => { console.log(broken); }}
      onCollapse={(collapsed, type) => { console.log(collapsed, type); }}
    >
      <div className="logo" />
      <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
        <Menu.Item key="1">
          <Icon type="user" />
          <span className="nav-text">nav 1</span>
        </Menu.Item>
        <Menu.Item key="2">
          <Icon type="video-camera" />
          <span className="nav-text">nav 2</span>
        </Menu.Item>
        <Menu.Item key="3">
          <Icon type="upload" />
          <span className="nav-text">nav 3</span>
        </Menu.Item>
        <Menu.Item key="4">
          <Icon type="user" />
          <span className="nav-text">nav 4</span>
        </Menu.Item>
      </Menu>
    </Sider>
    <Layout>
      <Header style={{ background: '#fff', padding: 0 }} />
      <Content style={{ margin: '24px 16px 0' }}>
        <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
          content
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>
        Ant Design ©2018 Created by Ant UED
      </Footer>
    </Layout>
  </Layout>,
  document.getElementById('main'));

但是不幸的是,我刚复制了antdesign代码时遇到了错误。我不知道是什么问题,请帮助我。

5 个答案:

答案 0 :(得分:1)

我看不到您的代码库,但我想原因是您尝试按需导入,但未在项目中使用babel-plugin-import。

请参考文档中的Import on Demand部分。

如果您使用的是create-react-app,则可以查看说明here

答案 1 :(得分:0)

我不知道 Ant设计组件,但是从您提供的堆栈跟踪中,我可以说antd对象不存在。可能是由于antd无法正确加载。我建议您通过尝试antd或对象的名称来检查console.log(antd)是否正在加载。

也请提供相关代码,以使我们更好地帮助您。

答案 2 :(得分:0)

问题出在我的gulp和browserify配置中。我试图更改我正在使用的技术,并且切换到webpack所获得的好处远胜于在下面的链接中可以看到的gulp:

gulp vs browserify vs webpack

答案 3 :(得分:0)

有点晚了,但这听起来像是打字稿错误。如果有人遇到此更改

import React, {Component} from 'react'

import * as React from 'react'

答案 4 :(得分:0)

如果您遇到此错误,也可以尝试这两种方法。它会起作用:

错误: enter image description here

解决方案 1:

import React from "react";

class Greetings extends React.Component {
  render() {
    return <div>working</div>;
  }
}

解决方案 2:

import React, { Component } from 'react';

class Greetings extends Component {
  render() {
    return <div>working</div>;
  }
}