React第三方组件2(状态管理之Refast的使用⑤LogicRender使用)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!

1、React第三方组件2(状态管理之Refast的使用①简单使用)---2018.01.29

2、React第三方组件2(状态管理之Refast的使用②异步修改state)---2018.01.30

3、React第三方组件2(状态管理之Refast的使用③扩展ctx)---2018.02.31

4、React第三方组件2(状态管理之Refast的使用④中间件middleware使用)---2018.02.01

5、React第三方组件2(状态管理之Refast的使用⑤LogicRender使用)---2018.02.02

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

今天我们来用下Refast的LogicRender!

http://doc.refast.cn/LogicRender.html LogicRender 是一个配合 Refast 使用的逻辑组件。可以嵌套使用,可以根据条件执行特定的 Action。

废话不多说!撸码开始!

1、安装依赖

npm install refast-logic-render --save

2、配置Decorators

npm i -D babel-plugin-transform-decorators-legacy

修改 .babelrc

"plugins": ["transform-decorators-legacy"]

3、配置demo7

把demo6 复制一份程 demo7

修改 demo下的 Index.jsx

import Dome7 from './demo7/Index'
<NavLink to="/Dome7" activeClassName="selected">demo7</NavLink>
<Route path="/Dome7" component={Dome7}/>

4、撸码

修改 TodoList.jsx

import LogicRender, { connect } from 'refast-logic-render';

完整代码

import React from 'react';
import Refast, {Component} from 'refast';
import LogicRender, {connect} from 'refast-logic-render';
import {Toast} from '../../common/layer';
// 引入 logic.js
import logic from './logic';
import List from './List';
import '../../../public/css/todoList.pcss';

@connect
class TodoList extends Component {
    constructor(props) {
        super(props, logic);
    }

    render() {
        let {list, isLoading, isEmpty} = this.state, {dispatch} = this;
        return (
            <div className="todoList">
                <Toast ref={e => Refast.use('fn', {Toast: e})}/>
                <input type="text" ref="todoInput"/>
                <button onClick={() => this.dispatch('handleAdd', this.refs['todoInput'].value)}>添加</button>
                <LogicRender
                    action={'getTodoList'}
                    isLoading={isLoading}
                    Loading={() => <div>加载中</div>}
                    isEmpty={isEmpty}
                    Empty={() => <div>暂无数据</div>}
                >
                    <div className="cont">
                        <div className="box">
                            全部
                            <List type={0} list={list} dispatch={dispatch}/>
                        </div>
                        <div className="box">
                            未删除
                            <List type={1} list={list} dispatch={dispatch}/>
                        </div>
                        <div className="box">
                            已删除
                            <List type={2} list={list} dispatch={dispatch}/>
                        </div>
                    </div>
                </LogicRender>
            </div>
        )
    }
}

export default TodoList;

修改 logic.js

完整代码

import apiRequestAsync from '../../../public/js/apiRequestAsync';

export default {
    defaults(props) {
        return {
            list: [],
            isLoading: true,
            isEmpty: false
        }
    },
    handleAdd({getState, setState}, title) {
        if (title) {
            let list = getState().list;
            list.push({id: list.length + 1, title: title, status: 1});
            setState({list: list});
        } else {
            alert('不能为空')
        }
    },
    handleItemEdit({getState, setState}, someState) {
        let {id, status} = someState, list = getState().list;
        list.find(data => data.id === id).status = status;
        setState({list: list})
    },
    async getTodoList({setState, fn}) {
        let todoList = {};
        try {
            todoList = await apiRequestAsync.post('todoList');
            setTimeout(() => {
                 //todoList.list = [];   //测试 空数据
                if (todoList.list.length > 0) {
                    fn.Toast.show('操作成功');
                    setState({isLoading: false, list: todoList.list})
                } else {
                    fn.Toast.show('暂无数据');
                    setState({isLoading: false, isEmpty: true})
                }
            }, 2000);
        } catch (error) {
            fn.Toast.show(error);
        }
    }
}

5、测试,看下浏览器

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

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android 开发学习

TabLayout double click 标题回顶部

1762
来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:活动日历控件(Event Calendar)

  Wijmo Event Calendar活动日历控件,是一个功能齐全的活动日历控件,允许用户添加,编辑和管理他们的日程。默认情况下,控件将使用Html5的L...

3339
来自专栏Python、Flask、Django

Go学习之 - 请求博客主页

1023
来自专栏wym

Windows创建窗口详解+代码---十天教会你俄罗斯方块

代码地址:https://blog.csdn.net/qq_41603898/article/details/80968266

1001
来自专栏前端新视界

构建具有用户身份认证的 React + Flux 应用程序

原文:Build a React + Flux App with User Authentication 译者:nzbin 译者的话:这是一篇内容详实的 Rea...

4917
来自专栏林德熙的博客

win10 uwp 显示SVG win2d 使用 svg

这些图片在http://www.zcool.com.cn/下载,不知道是不是不能直接用

2031
来自专栏狮乐园

codereview-s8

之后再efficiencyView方法中调用stopPropagation方法阻止事件冒泡

903
来自专栏逸鹏说道

探索ASP.NET MVC5系列之~~~2.视图篇(上)---包含XSS防御和异步分部视图的处理

其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/d...

3637
来自专栏coder修行路

Go实现海量日志收集系统(三)

2403
来自专栏程序员的诗和远方

TypeScript 中使用 CSS Modules

CSS 的全局性 相当长一段时间 CSS 总是在页面上作为一个全局的存在,以前这个『特性』影响还不算很大,命名上注意一点,比如使用 BEM 也能一定程度上解决问...

5667

扫码关注云+社区

领取腾讯云代金券