FormLayout 在 popover 模式下自定义组件报错

[liuweiGL]

CodeSandBox

https://codesandbox.io/s/angry-allen-xwwvr

错误信息

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

Check the render method of `ForwardRef`.
    at Trigger (https://30hr7.csb.app/node_modules/rc-trigger/lib/index.js:79:36)
    at Tooltip (https://30hr7.csb.app/node_modules/rc-tooltip/lib/Tooltip.js:29:32)
    at eval (https://30hr7.csb.app/node_modules/antd/es/tooltip/index.js:66:33)
    at eval (https://30hr7.csb.app/node_modules/antd/es/popover/index.js:25:31)
    at div
    at div
    at div
    at div
    at BaseItem (https://30hr7.csb.app/node_modules/@formily/antd/esm/form-item/index.js:87:24)
    at wrappedComponent (https://30hr7.csb.app/node_modules/@formily/reactive-react/esm/index.js:26:40)
    at wrappedComponent (https://30hr7.csb.app/node_modules/@formily/reactive-react/esm/index.js:26:40)
    at ArrayField (https://30hr7.csb.app/node_modules/@formily/react/esm/components/ArrayField.js:23:38)
    at RecursionField (https://30hr7.csb.app/node_modules/@formily/react/esm/components/RecursionField.js:28:41)
    at RecursionField (https://30hr7.csb.app/node_modules/@formily/react/esm/components/RecursionField.js:28:41)
    at SchemaField (https://30hr7.csb.app/node_modules/@formily/react/esm/components/SchemaFieid.js:31:70)
    at div
    at FormLayout (https://30hr7.csb.app/node_modules/@formily/antd/esm/form-layout/index.js:33:20)
    at eval (https://30hr7.csb.app/node_modules/@formily/react/esm/shared/context.js:14:23)
    at FormProvider (https://30hr7.csb.app/node_modules/@formily/react/esm/components/FormProvider.js:11:51)
    at _default

原因

Popover 组件需要传递 ref 给 children，自定义组件没有考虑该需求。

解决方式

能否在 FormLayout 内部对 children 包裹一下，不要让 ref 往下传递了，组件内部消化。

[janryWang]

给个codesandbox吧

[liuweiGL]

恩，更新上去了。

[janryWang]

这跟FormLayout没关系，是用connect，内部强制做了forwardRef包装，主要为了方便于接入第三方组件，如果仅仅只是开发业务自定义组件，推荐还是使用hook的形式来做

[janryWang]

那跟FormLayout也没关系呀，它只是个context下发组件

[liuweiGL]

嗷嗷，对。搞错了，应该是 FormItem。

[janryWang]

https://github.com/alibaba/formily/blob/formily_next/packages/antd/src/form-item/index.tsx#L165 应该是这里吧，不过我感觉不好解，只能包一个div，但是这个div只是为了解决这个ref问题，可能会影响到样式

[liuweiGL]

但是如果交给用户来解决，个人感觉成本有点高：

1. 要不所有的自定义组件都要包一层 forwardRef，工作量巨大。
2. 要不用户自己封装一下 FormItem，自己给 children 包一层 div。如果说这个方案会导致样式问题，每个用户都得自己处理一遍，那让框架统一处理是不是更好。

[janryWang]

我不是说了吗？只有用了connect的才会有这个问题，其实也是合理的，connect是给接入第三方组件用的，作为第三方组件，本身就是需要支持ref的，否则这个组件也不符合开放关闭原则