我正在使用 Antd Form，如何使用 typescript 编写自定义 FormItem 子组件类型定义？答案

【问题标题】：I am using Antd Form, how to write a custom FormItem children component type definition using typescript?我正在使用 Antd Form，如何使用 typescript 编写自定义 FormItem 子组件类型定义？
【发布时间】：2022-06-29 07:11:11
【问题描述】：

我为这个问题写了一个简单的演示。

https://codesandbox.io/s/react-typescript-forked-z0nf68?file=/src/CustomInput.tsx

我知道value 和onChange 是内部道具FormItem 会传递给孩子们，所以我认为我不需要在我的CustomInput 类型中定义它们。我想也许我可以扩展 FormItemProps 之类的东西，但它似乎不起作用。所以我想在这里问这个问题。

【问题讨论】：

标签： reactjs typescript antd

【解决方案1】：

import { Input, InputProps } from "antd";

interface CustomInputProps extends InputProps {
  text: string;
}

const CustomInput = ({ text, ...rest }: CustomInputProps) => {
  return (
    <>
      <div>{text}</div>
      <Input {...rest} />
    </>
  );
};

export default CustomInput;

【讨论】：