React第三方组件6(状态管理之Mobx的使用④TodoList下)

本教程总共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、查看浏览器效果

原文发布于微信公众号 - 前端人人(frontend_everyone)

原文发表时间:2018-04-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏liulun

在VSCode中编辑HTML文档时,在Dom标签上写style属性时智能提示的问题

首先在VSCode中打开一个HTML文件 然后点右下角的“选择语言模式” image.png 然后点击配置HTML语言的基础设置 image.png 然后在...

23880
来自专栏web

vue-router基本使用

16120
来自专栏代码GG之家

Scoops android app多主题架构(四)

使用Scoops ? 1:MainApp ? 使用addDayNightFlavor将一个主题设置为DayNight模式 2:在对应的主题里面配置上文本...

22860
来自专栏CodingBlock

Android查缺补漏(View篇)--布局文件中的“@+id”和“@id”有什么区别?

Android布局文件中的“@+id”和“@id”有什么区别? +id表示为控件指定一个id(新增一个id),如: <cn.codingblock.view.c...

32880
来自专栏十月梦想

小程序页面跳转

使用组件  <navigator> 示例:  <navigator url='../test/test'>点击跳转</navigator>

13330
来自专栏赵俊的Java专栏

Hexo优化 --- 添加复制功能

95110
来自专栏Golang语言社区

如何使用golang实现操作键盘按键

https://godoc.org/github.com/nsf/termbox-go 这个库可以支持 简单示例: package main import...

53350
来自专栏ArrayZoneYour的专栏

借助Babel 7和Webpack构建React Toolchain

React不是完全开箱即用的。它使用了一些最近node才支持的关键字和语法(在本教程中我使用了v 9.3.0版本)。因此需要一些很麻烦的设置,但是Faceboo...

27040
来自专栏小狼的世界

如何生成eot字体

前一段时间听闻Google退出ubuntu字体的时候,使用了一下,从而了解到 font-face 的用法:

14120
来自专栏九彩拼盘的叨叨叨

学习前端 第5周 第5天

11220

扫码关注云+社区

领取腾讯云代金券