业务需求：外部是一个不能编辑的table表格，在表格的右上角有一个编辑按钮，点击后出现弹窗，弹窗中是外部table表格的可编辑状态，编辑后可保存，外部table表格同步更新。
个人分析：其实这个业务用antd的table组件和modal组件来实现非常简单。外部用一个普通的table组件，在点击编辑时获取外部table组件的数据源赋值给modal组件中的内部table组件。当内部table组件的值改变后，调用接口保存数据。然后刷新外部tabel组件重新获取数据。这个逻辑就完成了。
组件化：因为有多处页面要使用到这个逻辑。于是可以将modal和table组件结合成自定义组件，类似于antdPro中的ModalForm。
** 首先分析一下，组件需要什么参数**
-
columns是需要传入的参数，因为每处业务的列定义都是不一样的
-
dataSource是需要传入的参数，初始化的时候获取数据。
-
modal组件的onOk事件，在编辑完modal内部table组件后，点击确定，要做的业务（调整数据结构，调用接口等等）。
-
modal组件的onCancel事件
** 然后分析自定义组件内部需要哪些功能通过ref暴露给父组件**
-
modal的开关功能（用usestate定义一个状态控制弹窗显隐）
-
table数据的获取功能（在父组件onOk或onCancel的时候会用到）
实际开发时遇到的问题：modal组件只有在挂载的时候（open为true），内部table的ref才是有值的，ref.current后面的方法才可以使用。当modal组件卸载后（open为false），内部table的ref是获取不到的（ undefined）
