1、我们俎振裣奇今天讲下扩展ctx。为什么要扩展ctx？比如说你异步请求会有个加载提示，或者说请求成功给个提示！我们今天要做的就是阄唰辔腽请求成功后给个提示，失败也会给个提示！1、我们先建一个提示组件Toast.jsx在app -> common ->新建layer文件夹 ->新建Toast.jsximport 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.jsximport Toastfrom './Toast'export {Toast}
3、在demo5中，修改 TodoList.jsximport {Toast}from '../../common/造婷用痃layer';Refast.use('fn', {Toast: e})}/>完整代码import Reactfrom 'react';import Refast, {Component}from 'refast';import {Toast}from '../../common/layer';// 引入 logic.jsimport 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;
4、修改logic.jsasync getTodoList({setState,fn}) {let todoList =await apiRequestAsync.post('todoList'); fn.Toast.show('操作成功'); setState({list: todoList.list})}
5、看下浏览器效果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
