标签：bsp react images design sign conf one button function
前提：已经完成项目实战（https://ant.design/docs/react/practical-projects-cn#定义-Model）
如果要想实现一个登陆窗口，首先得有一个ui，想到的是应该创建一个组件；有了组件之后，可以考虑直接在实战的组件中去显示，或者单独定义一个路由，去访问该路由去显示（这里采用路由的方案），最终效果如下：
第一步：在src/components文件间中，实现：
/**
* Created by kunyashaw on 2017/2/28.
*/
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中添加路由信息的配置
<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;
此时就已经实现功能了，其他更复杂的在此基础上修改就可以了。
标签：bsp react images design sign conf one button function
原文地址：http://www.cnblogs.com/kunyashaw/p/6479653.html
