本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1、React第三方组件4(状态管理之Reflux的使用①简单使用)---2018.03.13
2、React第三方组件4(状态管理之Reflux的使用②TodoList上)---2018.03.14
3、React第三方组件4(状态管理之Reflux的使用③TodoList中)---2018.03.15
4、React第三方组件4(状态管理之Reflux的使用④TodoList下)---2018.03.16
5、React第三方组件4(状态管理之Reflux的使用⑤异步操作)---2018.03.19
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1、React第三方组件4(状态管理之Reflux的使用①简单使用)---2018.03.13
2、React第三方组件4(状态管理之Reflux的使用②TodoList上)---2018.03.14
3、React第三方组件4(状态管理之Reflux的使用③TodoList中)---2018.03.15
4、React第三方组件4(状态管理之Reflux的使用④TodoList下)---2018.03.16
5、React第三方组件4(状态管理之Reflux的使用⑤异步操作)---2018.03.19
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
1、我们复制一份reflux1到reflux2
2、修改reflux下Index.jsx文件
import React from 'react'; import {HashRouter, Route, NavLink, Redirect} from 'react-router-dom'; import ReFlux1 from './reflux1/Index' import ReFlux2 from './reflux2/Index' const Index = ({match}) => <HashRouter> <div> <div className="nav"> <NavLink to="/ReFlux/ReFlux1" activeClassName="selected">ReFlux1</NavLink> <NavLink to="/ReFlux/ReFlux2" activeClassName="selected">ReFlux2</NavLink> </div> <Route exact path={`${match.url}`} render={() => (<Redirect to={`${match.url}/ReFlux1`}/>)}/> <Route path={`${match.url}/ReFlux1`} component={ReFlux1}/> <Route path={`${match.url}/ReFlux2`} component={ReFlux2}/> </div> </HashRouter> ; export default Index;
3、修改reflux2下Index.jsx
import React from 'react' import Reflux from 'reflux' import Action from './Action' import Store from './Store' class Index extends Reflux.Component { constructor(props) { super(props); this.store = Store; } render() { let list = this.state.list; return ( <div className="todoList"> <input type="text" ref="todoInput"/> <button onClick={() => Action.addTodo(this.refs['todoInput'].value)}>添加 </button> <div> { list.length > 0 && list.map(data => <li key={data.id}> {data.title} </li> ) } </div> </div> ); } } export default Index;
4、修改 Action.js
import Reflux from 'reflux' let Action = Reflux.createActions([ 'addTodo' ]); export default Action;
5、修改 Store.js
import Reflux from 'reflux' import Action from './Action' class Store extends Reflux.Store { constructor() { super(); this.listenables = Action; this.state = { list: [] } } onAddTodo(title) { if (!title) { alert('内容不能为空'); }else { let list = this.state.list; list.push({id: list.length + 1, title: title, status: 1}); this.setState({list: list}); } } } export default Store;
6、看下浏览器
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!