微信公众号首发
本教程总共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'
demo7
4、撸码
修改 TodoList.jsx
import LogicRender, { connect }from 'refast-logic-render';
完整代码
import Reactfrom 'react';
import Refast, {Component}from 'refast';
import LogicRender, {connect}from 'refast-logic-render';
import {Toast}from '../../common/layer';
// 引入 logic.js
import logicfrom './logic';
import List from './List';
import '../../../public/css/todoList.pcss';
@connect
class TodoListextends Component {
constructor(props) {
super(props, logic);
}
render() {
let {list, isLoading, isEmpty} =this.state, {dispatch} =this;
return (
Refast.use('fn', {Toast: e})}/>
this.dispatch('handleAdd', this.refs['todoInput'].value)}>添加
action={'getTodoList'}
isLoading={isLoading}
Loading={() =>
isEmpty={isEmpty}
Empty={() =>
>
全部
未删除
已删除
)
}
}
export default TodoList;
修改 logic.js
完整代码
import apiRequestAsyncfrom '../../../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、测试，看下浏览器
