每当我想使用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代码时遇到了错误。我不知道是什么问题,请帮助我。
答案 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:
答案 3 :(得分:0)
有点晚了,但这听起来像是打字稿错误。如果有人遇到此更改
import React, {Component} from 'react'
到
import * as React from 'react'
答案 4 :(得分:0)