Typescript JSX：理解 Ant Design ProForm 语法

Question

我正在尝试按照此处的文档使用 Ant Design Pro Form：https://procomponents.ant.design/en-US/components/modal-form/

但是，在尝试重现他们的示例时，我总是遇到语法错误。导致问题的原因是这种特殊的语法：

<DrawerForm<{
   name: string;
   company: string;
}>
  title="..."
  ...
>

我一开始以为是 Ant Design Pro 特有的自定义语法，直到我意识到它可能是 Typescript JSX。但是我完全无法在反应文档（也不是打字稿文档）中找到这样的语法。

我知道 DrawerForm<{name: string; company: string;}> 可能是一种模板类型，而 {name: string; company: string;} 是一种应该表示表单模型的数据结构，但没有任何明确的解释。这个可以省略吗？这里有什么意义（这个结构甚至不匹配表单字段）。

否则，我正在努力处理此页面 (https://procomponents.ant.design/en-US/components/form) 中的示例代码：

// Set overall default values
<ProForm initialValues={obj} />

// Set the individual control's
<ProForm
 onValuesChange={(changeValues) => console.log(changeValues)}
>
  <ProFormText initialValue="prop"/>
</ProForm>.

// Interdependent component linkage
<ProForm
  <ProForm.Item noStyle shouldUpdate>
    {(form) => {
      return (
        <ProFormSelect
          options={[
            {
              value: "chapter",
              label: "Effective when stamped",
            },
          ]}
          width="md"
          name="useMode"
          label={`with${form.getFieldValue("name")}contract agreement effective mode`}
        />
      );
    }}
  </ProForm.Item>.
</ProForm>;


// Using custom components
<ProForm
  <ProForm.Item name="switch" label="Switch" valuePropName="checked">
    <Switch />
  </ProForm.Item
</ProForm

这似乎不稳定，标签未关闭。你能确认不只是我遗漏了什么吗？

Answer 1

这只是一个简单的通用类型。你可以写一个泛型函数

declare function reverseArray<T>(array: T[]): T[]

然后通过在函数名后的尖括号中添加类型来使用它

const array: number[] = [1, 2, 3]
const reversed = reverseArray<number>(array)

那你为什么不创建一个通用的 React 组件

const ArrayView = <T extends any>({
  array,
  renderItem,
}: {
  array: T[],
  renderItem: (item: T) => ReactNode,
}) => ({
  <div>
    {array.map(item => renderItem(item))}
  </div>
})

然后通过在函数（=组件）名称后的尖括号中添加类型来使用它

const array: number[] = [1, 2, 3]

<ArrayView<number>
  array={array}
  renderItem={(item) => <span>{item + 1}</span>}
/>

除了你的情况，类型参数不是number而是{name: string, company: string}。

当然，在普通函数和 React 组件示例中，您都可以省略 <number> 部分，让 typescript 自己推断类型，但重点仍然是，这是普通的通用函数语法，只是看起来有点奇怪在多伦多证券交易所。另请注意，在第二个示例中，如果您使用箭头函数定义组件，则必须添加此 extends any 东西，因为如果您只写 <T> 打字稿会认为它是一个开始的 TSX 标记并混淆自己。

实际上，即使组件是通用的，在 99.99% 的情况下，typescript 也能够从某些 prop 类型正确推断出所有内容，这可能就是您以前从未见过这种语法的原因。但有时你必须使用它，如果推理本身不起作用。

据我所知，这种语法相对较新，因此您可能需要更新编译器或其他软件才能使其正常工作。或者完全避免它，因为您实际上可以通过在其他地方指定此类型来使 TS 推断所有内容，例如

<DrawerForm
  onFinish={async (values: {name: string, company: string}) => {
    // ...
  }}
  // ...
/>

说到未闭合的标签，这可能只是一堆错别字。如果您查看此页面的中文版，您会看到

<ProForm>
  <Form.Item name="switch" label="Switch" valuePropName="checked">
    <Switch />
  </Form.Item>
</ProForm>

这可能不会提出任何问题

Typescript JSX：理解 Ant Design ProForm 语法

Typescript JSX : Understanding Ant Design ProForm syntax

reactjs

typescript

jsx

antd

ant-design-pro