将代码转换为 TypeScript 时出现“没有重载匹配此调用”错误

Question

我是 TypeScript 的新手，我已将我的所有代码（React Hooks）都转换为 TypeScript，除了我收到以下错误的一件事：

没有重载匹配此调用。 重载 1 of 2, '(props: { component: ElementType; } & { children?: ReactNode; color?: "primary" | "secondary" | undefined; disabled?: boolean | undefined; error?: boolean | undefined; 。 .. 6 more ...; variant?: "outlined" | ... 2 more ... | undefined; } & CommonProps & Pick): Element'，给出了以下错误。 类型“{ children: Element;”中缺少属性“组件”；类名：字符串； htmlFor: 字符串； }' 但在类型 '{ component: ElementType; }'。 重载 2 of 2，'(props: DefaultComponentProps>): Element'，给出了以下错误。 类型'{孩子：元素；类名：字符串； htmlFor: 字符串； }' 不可分配给类型 'IntrinsicAttributes & { children?: ReactNode;颜色？

问题来自这里：

import {
  Box,
  Button,
  TextField,
  FormControl,
  FormGroup,
  Select,
} from "@material-ui/core/";
import { Trans } from "react-i18next";

interface ConnectedLinkProps {
  onSubmit: string;
  classes: {
    formControl: string;
  };
}


<FormControl className={classes.formControl} htmlFor="source">
  <TextField
    id="source"
    disabled={true}
    value={linkSettings.source}
    label={<Trans i18nKey="form.linkForm.sourceNode">Source Node</Trans>}
  />
</FormControl>;

“FormControl line”的第一行是红色的。

Answer 1

如果您从 FormControl 组件中删除道具，错误应该会消失。

<FormControl>
  <TextField
    id="source"
    disabled={true}
    value="Something"
    label={<Trans i18nKey="form.linkForm.sourceNode">Source Node</Trans>}
  />
</FormControl>

FormControl 组件不支持 className 或 htmlFor 属性。

Link to a forked example on CodeSandbox.

共享代码的工作示例如下所示：

import React from "react";
import {
  Box,
  Button,
  TextField,
  FormControl,
  FormGroup,
  Select,
  InputLabel
} from "@material-ui/core/";
import { Trans } from "react-i18next";

interface ConnectedLinkProps {
  onSubmit: string;
  classes: {
    formControl: string;
  };
}

const App: React.FC<ConnectedLinkProps> = ({ onSubmit, classes }) => {
  return (
    <div className="App">
      <FormControl>
        <InputLabel htmlFor="source">Something</InputLabel>
        <TextField
          id="source"
          disabled={true}
          value="Something"
          label={<Trans i18nKey="form.linkForm.sourceNode">Source Node</Trans>}
          className={classes?.formControl}
        />
      </FormControl>
    </div>
  );
};

export default App;