react如何开发第三方组件可扩展
1、我们今天讲下扩展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}
3、在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;
4、修改 logic.js
async 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
