React第三方组件扩展开发

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 文件内容。