ant-design实现⼀个登陆窗⼝
如果要想实现⼀个登陆窗⼝，⾸先得有⼀个ui，想到的是应该创建⼀个组件；有了组件之后，可以考虑直接在实战的组件中去显⽰，或者单独定义⼀个路由，去访问该路由去显⽰（这⾥采⽤路由的⽅案），最终效果如下：
第⼀步：在src/components⽂件间中，实现：
/**
* Created by kunyashaw on 2017/2/28.
*/
react router 配置
import { Button } from 'antd';
import React from 'react';
const Login = () => {
return (
<div>
<h2>这是登录窗⼝</h2>
<Button type="primary">注册</Button>
<Button>登录</Button>
<br/>
<Button type="dashed">Dashed</Button>
<Button type="danger">Danger</Button>
</div>
);
};
export default Login;
第⼆步：在routes⽬录中创建Login.js
import React from 'react';
import Login from '../components/Login'
const LoginRoute = (props) => (
<Login></Login>
);
export default LoginRoute;
第三步：在router.js中添加路由信息的配置
⾸先引⼊：
import LoginRoute from './routes/Login'
添加路由信息的设置：
<Route path="/login" component={LoginRoute} />
最终代码如下：
import React from 'react';
import { Router, Route } from 'dva/router';
import IndexPage from './routes/IndexPage';
import Products from './routes/Products';
import LoginRoute from './routes/Login'
function RouterConfig({ history }) {
return (
<Router history={history}>
<Route path="/" component={IndexPage} />
<Route path="/products" component={Products} />
<Route path="/login" component={LoginRoute} />
</Router>
);
}
export default RouterConfig;
此时就已经实现功能了，其他更复杂的在此基础上修改就可以了。

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