React 实践项目 (四)
上回说到使用Redux-saga 管理 Redux 应用异步操作,应用还是只有一个首页.现在开始构建一个新的投稿页面并使用 React-Router 进行路由管理. React 实践项目 (一) - 首先我们来构建投稿页面创建 src/containers/SubmitEntry.js /** * Created by Yuicon on 2017/7/13. * https://github.com/Yuicon */ import React,{Component} from 'react'; import {Button,Form,Input,Switch,Notification} from "element-react"; import {connect} from "react-redux"; import {createEntryAction} from '../../redux/action/entries'; import './SubmitEntry.css'; @connect( (state) => { return ({ entries: state.entries,}); },{createEntryAction: createEntryAction} ) export default class SubmitEntry extends Component { constructor(props) { super(props); this.state = { form: { title: '',content: '',original: true,originalUrl: null,english: false,type: 'article',},loading: false,}; } componentWillReceiveProps(nextProps) { if (nextProps.entries.get('saveSuccess')) { Notification.success({ title: '成功',message: '投稿成功',duration: 1500 }); this.setState({form: { title: '',}}); } else if (nextProps.entries.get('error')) { Notification.error({ title: '错误',message: nextProps.entries.get('error'),type: 'success',duration: 1500 }); } this.setState({loading: false}); } handleSubmit = () => { this.props.createEntryAction(this.state.form); this.setState({loading: true}); }; handleChange = (key,value) => { this.setState({ user: Object.assign(this.state.form,{[key]: value}) }); }; render(){ return( <div className="SubmitEntry-container"> <div className="head"> <h2>推荐文章到掘金</h2> <p>感谢分享,文章的审核时间约1-2个工作日</p> </div> <div className="entry-form"> <Form model={this.state.form} labelWidth="80" onSubmit={this.handleSubmit}> <Form.Item label="分享网址"> <Input value={this.state.form.originalUrl} onChange={this.handleChange.bind(this,'originalUrl')}/> </Form.Item> <Form.Item label="标题"> <Input value={this.state.form.title} onChange={this.handleChange.bind(this,'title')}/> </Form.Item> <Form.Item label="描述"> <Input value={this.state.form.content} onChange={this.handleChange.bind(this,'content')}/> </Form.Item> <Form.Item > <Switch value={this.state.form.original} onChange={this.handleChange.bind(this,'original')} onText="原创" offText="转载"> </Switch> </Form.Item> <Form.Item > <Switch value={this.state.form.english} onChange={this.handleChange.bind(this,'english')} onText="英文" offText="中文"> </Switch> </Form.Item> <Form.Item > <Button type="primary" onClick={this.handleSubmit} loading={this.state.loading}> 发布 </Button> </Form.Item> </Form> </div> </div> ) } } 相关的Redux部分已经讲过.就不重复介绍了,感兴趣的可以查看示例代码
编辑 package.json // react-router-dom 包含 react-router "react-router-dom": "^4.1.1",
/** * Created by Yuicon on 2017/6/25. */ import React,{ Component } from 'react'; import {BrowserRouter as Router,Route} from 'react-router-dom' import './App.css'; import Index from "../Index/Index"; import Header from "../Header/Header"; import SubmitEntry from "../SubmitEntry/SubmitEntry"; export default class App extends Component { render(){ return( <Router> <div className="App"> <Route component={Header}/> <Route exact path="/" component={Index}/> <Route exact path="/submit-entry" component={SubmitEntry}/> </div> </Router> ) } } Router: Router 一共有三种,我们采用的是常用的 browserHistory browserHistory h5的history Route : 每个 Route 标签都对应一个UI页面,它的职责就是当页面的访问地址与 Route 上的 path 匹配时,就渲染出对应的 UI 界面。 exact : Route 上的 exact props 表示采用严格匹配,页面的访问地址与 Route 上的 path 必须一样 history: 常用方法 push(path,[state]) 在历史堆栈信息里加入一个新条目。 replace(path,[state]) 在历史堆栈信息里替换掉当前的条目 goBack() 等同于浏览器的后退键 match: match 对象包含了 Route 如何与 URL 匹配的信息,具有以下属性: params: object 路径参数,通过解析 URL 中的动态部分获得键值对 isExact: bool 为 true 时,整个 URL 都需要匹配 path: string 用来匹配的路径模式,用于创建嵌套的 <Route> url: string URL 匹配的部分,用于嵌套的 <Link> 常用于获取路径中的参数
完整项目代码地址:https://github.com/DigAg/diga... (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |