React开发可扩展第三方组件的方法
1、 今天我们来讲解扩展ctx的相关内容。
2、 扩展ctx有何必要?
3、 异步请求时应显示加载状态,成功后给予相应提示。
4、 请求成功或失败时,系统都将给出相应提示。
5、 创建一个提示组件,命名为 Toast.jsx。
6、 在 app 目录下的 common 文件夹中创建 layer 文件夹,并新建 Toast.jsx 文件。
7、 };
8、 }
9、 }
10、 :
11、 ];
12、 }
13、 }
14、 添加样式效果
15、 }
16、 }
17、 导出该组件
18、 在 demo5 中对 TodoList.jsx 文件进行修改调整。
19、 完整源码
20、 导入 logic.js 文件
21、 }
22、 }
23、 点击按钮可触发添加操作,通过调用 dispatch 方法并传入 refs 中的值来执行新增功能。
24、 全部
25、 未删除
26、 已删除
27、 );
28、 }
29、 }
30、 调整 logic.js 文件中的逻辑代码
31、 操作成功,提示已显示。
32、 }
33、 查看浏览器显示效果
34、 处理错误提示信息
35、 操作成功,提示信息已显示。
36、 操作失败,请稍后重试或检查网络连接。
37、 }
38、 }
39、 调整 mock 目录中的 todoList.js 文件内容。
