[Bug Report] 使用阅读态组件时x-component-props类型报错

[aspirantzhang]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

官网代码即可重现 https://antd.formilyjs.org/components/preview-text

What is expected?

解决TS类型报错

What is actually happening?

Package

@formily/antd@2.0.0-beta.56

---

[liuweiGL]

问题1

createSchemaField 方法接收 PreviewText 时报错。

原因

createSchemaField 方法的 components 期待的是一个 Record<string, JSXComponent>，但是 PreviewText 是一个 object。

需明确

这个问题应该属于 createSchemaField 参数的类型定义错误还是使用方式错误？

建议

个人感觉从 typescript 的角度来看是用法错误，因为 components 中如果允许 object，那么 x-component 就允许直接使用 PreviewText 作为值。也就导致编译时不报错但是运行时会报错，因为 PreviewText 并不是一个组件。

所以从用法来调整的话，有 2 个方案：

1. 使用 PreviewText.Input 作为 components 的值。
2. 调整 PreviewText 为组件而不是对象（个人偏向该方案）：

   export const PreviewText = Input // 也可以重新定义一个默认组件
   Object.assign(PreviewText,{
   Input,
   Select,
   TreeSelect,
   Cascader,
   DatePicker,
   DateRangePicker,
   TimePicker,
   TimeRangePicker,
   Placeholder,
   usePlaceholder,
   })

[liuweiGL]

问题2

x-component-props 报错。

原因

这个应该是 SchemaField 类型推断有点问题，需要再看看。

[janryWang]

我感觉也是用法问题，为啥会单纯只用PreviewText。。。想不通

[liuweiGL]

不是用户的用法有问题，是组件的设计有问题：

1. PreviewText 设计成 object，导致 createSchemaField 接口类型不匹配。
2. 如果使用

   const SchemaField = createSchemaField({
   components: {
   FormItem,
   "PreviewText.Input":PreviewText.Input,
   },
   })

   这个方式，x-component-props 推导出来的类型是错误的 #1507