React第三方组件2(状态管理之Refast的使用③扩展ctx
本教程总共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
我们今天讲下扩展ctx。
为什么要扩展ctx？
比如说你异步请求会有个加载提示，或者说请求成功给个提示！
我们今天要做的就是请求成功后给个提示，失败也会给个提示！
1、我们先建一个提示组件 Toast.jsx
在 app -> common -> 新建 layer 文件夹 -> 新建 Toast.jsx
import Reactfrom 'react';
class Toastextends React.Component {
constructor(props) {
super(props);
this.state = {
show:false,
text:''
};
}
show(text) {
this.setState({show:true, text: text}, () =>setTimeout(() =>this.setState({show:false}), 2000))
}
render() {
let {show, text} =this.state;
return [
show ?
{text}:
null
];
}
}
export default Toast;
2、添加样式
.layer {
&.toast {
background-color:rgba(0, 0, 0, 0.6);
color:#ffffff;
width:auto;
padding:5px 10px;
border-radius:4px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
}
3、导出这个组件
layer -> Index.jsx
import Toastfrom './Toast'
export {Toast}
4、在demo5 中，修改 TodoList.jsx
import {Toast}from '../../common/layer';
Refast.use('fn', {Toast: e})}/>
完整代码
import Reactfrom 'react';
import Refast, {Component}from 'refast';
import {Toast}from '../../common/layer';
// 引入 logic.js
import logicfrom './logic';
import List from './List';
import '../../../public/css/todoList.pcss';
class TodoListextends Component {
constructor(props) {
super(props, logic);
}
componentDidMount() {
this.dispatch('getTodoList');
}
render() {
let {list} =this.state, {dispatch} =this;
return (
this.dispatch('handleAdd', this.refs['todoInput'].value)}>添加
全部
未删除
已删除
Refast.use('fn', {Toast: e})}/>
);
}
}
export default TodoList;
5、修改 logic.js
async getTodoList({setState,fn}) {
let todoList =await apiRequestAsync.post('todoList');
fn.Toast.show('操作成功');
setState({list: todoList.list})
}
6、看下浏览器效果
7、处理下 错误提示
async getTodoList({setState,fn}) {
let todoList = {};
try {
todoList =await apiRequestAsync.post('todoList');
fn.Toast.show('操作成功');
setState({list: todoList.list})
}catch (error) {
fn.Toast.show('操作失败');
}
}
修改下 mock 下的 todoList.js
8、看下浏览器
OK 异常也捕获到了！
9、还可以这样写
如果要提示服务端返回的错误应该如何写？
10、再看下浏览器
OK，提示的是 服务端返回错误信息！
那这是为什么呢？
主要看这里
