[Field][QUESTION] Field 自定义组件能否不包裹 React.forwardRef()

alibaba-fusion / next

🦍 A configurable component library for web built on React.

https://fusion.design

MIT License

4.58k stars 589 forks source link

[Field][QUESTION] Field 自定义组件能否不包裹 React.forwardRef() #3581

Open yiescc opened 2 years ago

yiescc commented 2 years ago

Component

Field

Feature Description

背景 1.对自定义组件使用field.init后，会报错

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

但是没有包裹也是正常使用的

需求： 1.能否不包裹 React.forwardRef 2.一定要包裹 React.forwardRef的原因是什么

lakerswgq commented 2 years ago

这里用 ref 监听组件的 mount/unmount 过程，可以做一些操作。 eg: 如果组件 unmount ，name 对应的 value 需要删掉，这种表单联动中常见

bindoon commented 2 years ago

因为 Field 需要获取 Ref，主要做了下面两件事情：

判断组件是否 mount/unmount，都是通过 ref 来判断的。如果不包裹 React.forwardRef() 可能组件删除后 Filed 检测不出来，导致数据依然缓存。
组件校验出错的时候，自动滚动到出错组件的位置。如果不包裹 React.forwardRef() 可能会缺失此功能

callmeYe commented 2 years ago

因为 Field 需要获取 Ref，主要做了下面两件事情：

判断组件是否 mount/unmount，都是通过 ref 来判断的。如果不包裹 React.forwardRef() 可能组件删除后 Filed 检测不出来，导致数据依然缓存。

组件校验出错的时候，自动滚动到出错组件的位置。如果不包裹 React.forwardRef() 可能会缺失此功能

那如果将该组件自行包裹了forwardRef并且传了一个ref呢，field会受影响吗

YSMJ1994 commented 8 months ago

因为一些设计缺陷，目前只针对 class component 能完整实现 Field 的全部功能，建议使用 ConfigProvider.config() 包裹自定义组件来在 Field、Form 场景使用，我们将在 2.x 版本修复这个问题