ant design pro v4踩坑记

发布网友发布时间：2024-10-15 23:07

共1个回答

热心网友时间：2024-11-03 14:20

最近在使用ant design pro的过程中，遇到了诸多问题，耗费了不少精力。为避免日后遗忘，特此记录下来，希望对大家有所帮助。

版本选择

目前最新版本为ant design pro v4，但网上大部分教程仍以v3甚至更早的版本为主。v4与v3相比，改动较大，大部分实例已转变为react hook的形式，即函数组件。在v3中，大多数组件采用的是class形式。

因此，对于新手学习起步，建议直接使用v4版本，学习最新的内容。若需修改老项目，则优先选用当前版本的代码，因为修改起来相对麻烦，本人亲身体验过。

子组件修改父组件的state

目前主要有两种情况：

1. 使用class的有状态组件进行传值（class形式）

2. 使用react hook的函数组件进行传值（function形式）

以下分别展开说明。

首先是class形式函数组件，

该例子是在父组件中引入一个包含Input的子组件，当子组件的Input值发生变化时，父组件的值也会受到影响。

由于setState是异步的，在使用时，尤其是涉及count计算等场景，最好采用以下形式：

同样的功能使用函数组件的形式实现

坑人的Form

从v3升级到v4，最令人头疼的就是Form。由于我的项目使用的是class形式，因此没有采用React Hook的形式进行编写。然而，官网上v4的示例基本上都是函数组件的形式。在v3中使用Form时，需要使用Form.Create来包裹组件才能使用一些值，但在V4中不能使用Form.Create。因此，在这期间我调查了好久，最后成功解决了问题。我使用的例子是官网的可编辑表格，参考v3和官网的迁移指南，最终修改完成。

大概就是这样，关键点都加上注释，我写的ts也不太好，这里主要是参考实现方式吧。

大概就这样吧，じゃあ。