本教程总共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、我们先复制一份reflux3到reflux4
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' import ReFlux3 from './reflux3/Index' import ReFlux4 from './reflux4/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> <NavLink to="/ReFlux/ReFlux3" activeClassName="selected">ReFlux3</NavLink> <NavLink to="/ReFlux/ReFlux4" activeClassName="selected">ReFlux4</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}/> <Route path={`${match.url}/ReFlux3`} component={ReFlux3}/> <Route path={`${match.url}/ReFlux4`} component={ReFlux4}/> </div> </HashRouter> ; export default Index;
3、修改 reflux4下的Index.jsx
import React from 'react' import Reflux from 'reflux' import Action from './Action' import Store from './Store' class List extends Reflux.Component { constructor(props) { super(props); this.store = Store; } render() { let {list} = this.state; let type = this.props.type; let LiCont = ({data}) => <li> {data.title} <button onClick={() => Action.itemEdit({ id: data.id, status: data.status === 1 ? 0 : 1 })} className={data.status === 1 ? "del" : "recovery"}> {data.status === 1 ? "删除" : "恢复"} </button> </li> ; return ( <div className="list"> { list.length > 0 && list.map(data => [ type === 0 ? <LiCont data={data} key={data.id}/> : type === 1 && data.status === 1 ? <LiCont data={data} key={data.id}/> : type === 2 && data.status === 0 ? <LiCont data={data} key={data.id}/> : null ] ) } </div> ); } } class Index extends Reflux.Component { render() { return ( <div className="todoList"> <input type="text" ref="todoInput"/> <button onClick={() => Action.addTodo(this.refs['todoInput'].value)}>添加 </button> <div className="cont"> <div className="box"> 全部 <List type={0}/> </div> <div className="box"> 未删除 <List type={1}/> </div> <div className="box"> 已删除 <List type={2}/> </div> </div> </div> ); } } export default Index;
4、查看浏览器
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!