React third-party component 6 (use of Mobx for state management ④under TodoList)

React third-party component 6 (use of Mobx for state management ④under TodoList)

This tutorial has a total of 5 articles, one updated daily, please follow us! You can enter the historical news to view the previous articles, and stay tuned for our new articles!

1. React third-party components 6 (the use of Mobx for state management①simple use) ---2018.03.28

2. React third-party component 6 (Use of Mobx for state management ②TodoList) ---2018.03.29

3. React third-party component 6 (use of Mobx for state management ③TodoList) ---2018.03.30

4. React third-party component 6 (use of Mobx for state management ④under TodoList) ---2018.04.02

5. React third-party components 6 (use of Mobx for state management ⑤ asynchronous operation) ---2018.04.03

Development environment: Windows 8, node v8.9.1, npm 5.5.1, WebStorm 2017.2.2

1. We copy a copy of mobx3 to mobx4 and modify the Index.jsx file under mobx

2. Modify Index.jsx under mobx4

<div className="cont">
    <div className="box">
        All
        <List type={0} store={newState}/>
    </div>
    <div className="box">
        Not deleted
        <List type={1} store={newState}/>
    </div>
    <div className="box">
        deleted
        <List type={2} store={newState}/>
    </div>
</div>

3. Create a new List component

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? "Delete": "Restore"}
            </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. Check the browser effect

Reference: https://cloud.tencent.com/developer/article/1092687 React third-party component 6 (use of Mobx for state management under TodoList)-Cloud + Community-Tencent Cloud