本教程总共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、查看浏览器
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!
