本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1、React第三方组件6(状态管理之Mobx的使用①简单使用)---2018.03.28
2、React第三方组件6(状态管理之Mobx的使用②TodoList上)---2018.03.29
3、React第三方组件6(状态管理之Mobx的使用③TodoList中)---2018.03.30
4、React第三方组件6(状态管理之Mobx的使用④TodoList下)---2018.04.02
5、React第三方组件6(状态管理之Mobx的使用⑤异步操作)---2018.04.03
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
1、我们复制一份mobx3到mobx4,并修改mobx下的Index.jsx文件
2、修改mobx4下的Index.jsx
<div className="cont"> <div className="box"> 全部 <List type={0} store={newState}/> </div> <div className="box"> 未删除 <List type={1} store={newState}/> </div> <div className="box"> 已删除 <List type={2} store={newState}/> </div> </div>
3、新建List组件
import React from 'react'; import {observer} from 'mobx-react'; const List = observer((props) => { let LiCont = ({data}) => <li> {data.title} <button onClick={() => props.store.edit({ id: data.id, status: data.status === 1 ? 0 : 1 })} className={data.status === 1 ? "del" : "recovery"}> {data.status === 1 ? "删除" : "恢复"} </button> </li> ; return ( <div className="list"> { props.store.list.length > 0 && props.store.list.map(data => [ props.type === 0 ? <LiCont data={data} key={data.id}/> : props.type === 1 && data.status === 1 ? <LiCont data={data} key={data.id}/> : props.type === 2 && data.status === 0 ? <LiCont data={data} key={data.id}/> : null ] ) } </div> ) }); export default List;
4、查看浏览器效果
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!