react：umi引⼊antd踩坑
⾸先要明确⼀个问题。
不管是 antd 还是 dva 还是别的什么东西，他们都是 umi 的插件——只要这个项⽬是使⽤ umi 脚⼿架⽣成的。
所以第⼀步应该是 .umirc.js (config.js) 的配置。
// ref: /config/
export default {
treeShaking: true,
routes: [
{
path: '/',
component: '../layouts/index',
routes: [
{ path: '/', component: '../pages/index' }
]
}
],
plugins: [
// ref: /plugin/umi-plugin-react.html
['umi-plugin-react', {
antd: true,
dva: true,
dynamicImport: false,
title: 'umi_with_dva_test',
dll: false,
routes: {
exclude: [
/components\//,
],
},
}],
],
}
把 antd 的布局UI的代码粘到 Layouts 中。
请记住：
Layouts > Pages > Components
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
export default function(props) {
return (
<Layout>
<Header className="header">
<div className="logo" />
<Menu
theme="dark"
mode="horizontal"
defaultSelectedKeys={['2']}
style={{ lineHeight: '64px' }}
>
<Menu.Item key="1">nav 1</Menu.Item>
react面试题ref概念<Menu.Item key="2">nav 2</Menu.Item>
<Menu.Item key="3">nav 3</Menu.Item>
</Menu>
</Header>
<Layout>
<Sider width={200} style={{ background: '#fff' }}>
<Menu
mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ height: '100%', borderRight: 0 }}
>
<SubMenu
key="sub1"
title={
<span>
<Icon type="user" />
subnav 1
</span>
}
>
<Menu.Item key="1">option1</Menu.Item>            <Menu.Item key="2">option2</Menu.Item>            <Menu.Item key="3">option3</Menu.Item>            <Menu.Item key="4">option4</Menu.Item>          </SubMenu>
<SubMenu
key="sub2"
title={
<span>
<Icon type="laptop" />
subnav 2
</span>
}
>
<Menu.Item key="5">option5</Menu.Item>            <Menu.Item key="6">option6</Menu.Item>            <Menu.Item key="7">option7</Menu.Item>            <Menu.Item key="8">option8</Menu.Item>          </SubMenu>
<SubMenu
key="sub3"
title={
<span>
<Icon type="notification" />
subnav 3
</span>
}
>
<Menu.Item key="9">option9</Menu.Item>            <Menu.Item key="10">option10</Menu.Item>            <Menu.Item key="11">option11</Menu.Item>            <Menu.Item key="12">option12</Menu.Item>          </SubMenu>
</Menu>
</Sider>
<Layout style={{ padding: '0 24px 24px' }}>
<Breadcrumb style={{ margin: '16px 0' }}>
<Breadcrumb.Item>Home</Breadcrumb.Item>          <Breadcrumb.Item>List</Breadcrumb.Item>          <Breadcrumb.Item>App</Breadcrumb.Item>        </Breadcrumb>
<Content
style={{
background: '#fff',
padding: 24,
margin: 0,
minHeight: 'calc(100vh - 141px)',
}}
>
{props.children}
</Content>
</Layout>
</Layout>
</Layout>
);
}
最后是page。
export default function() {
return (
<div>123</div>
);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。