ant-design 新增hook,Form.List.usePrefixName

hfwmuf9z  于 21天前  发布在  其他
关注(0)|答案(7)|浏览(16)

What problem does this feature solve?

场景:在某些复杂的大表单场景中,表单代码通常要拆分成好几个组件,在有多个Form.List嵌套的后代组件中,想要拿到完整的namePath并不容易,需要层层传递props;
目的:希望可以在所有的后代元素中,使用hook就可以拿到prefixName;

What does the proposed API look like?

type Form.List.usePrefixName = (): (string | number)[] | undefined

9q78igpj

9q78igpj1#

感觉不错,不过 Form.List.usePrefixName 会有点碎。最好是有 Scope 的概念,这样即便不是 List 也能获得层级的效果,可以先搞个 RFC 出来。

deikduxw

deikduxw2#

感觉不错,不过 Form.List.usePrefixName 会有点碎。最好是有 Scope 的概念,这样即便不是 List 也能获得层级的效果,可以先搞个 RFC 出来。

感觉有点难搞, Form.List 的children完全是用户自定义渲染的, field.name 没有办法向下传递,除非要求用户在渲染 fields 的时候强行给每一项加一个 Provider ,但这样又不合理。。。

bf1o4zei

bf1o4zei3#

我印象里之前看过别人做的差不多这个样式:

const MyApp = () => (
  <Form>
    <FormScope name="user">
      <UserFormBlock />
    </FormScope>
  </Form>
);

const UserFormBlock = () => {
  const path = usePath(); // `user`
};

这个只是个例子,对于嵌套的场景不一定单独在 List 里,如果是 List 就自动加上 Scope。最好是一种通用的方案~

jum4pzuy

jum4pzuy4#

我印象里之前看过别人做的差不多这个样式:

const MyApp = () => (
  <Form>
    <FormScope name="user">
      <UserFormBlock />
    </FormScope>
  </Form>
);

const UserFormBlock = () => {
  const path = usePath(); // `user`
};

这个只是个例子,对于嵌套的场景不一定单独在 List 里,如果是 List 就自动加上 Scope。最好是一种通用的方案~

我尝试一下

hjqgdpho

hjqgdpho5#

对了,我建议可以考虑先写一个 RFC 出来让大家讨论一下~这样免得有东西没考虑全。

zour9fqk

zour9fqk6#

对了,我建议可以考虑先写一个 RFC 出来让大家讨论一下~这样免得有东西没考虑全。

#47328
是这样吗?

b91juud3

b91juud37#

lemonied@55626ea
@zombieJ 酱总,有空瞅一眼,指导一下😳

相关问题