Reactjs 我想做一个表单组件。什么是内在的颂词？

我想制作一个包含函数参数的表单组件。 我试着利用道具的作用来作曲。 但下面发生了一个错误。 如何解决此错误

打字脚本错误。类型{submit:user:string=>void不可用 可分配给类型“IntrinsicattAttributes”的属性“submit”不可用 存在于类型intrinsicatAttributes&user:string，=>void上

但是，表单componet上存在submit

const UserForm = (
  submit: (user: string) => void,
  name: string,
) => {
  const handleChange = (name: string) => (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    setState({ ...state, [name]: event.target.checked });
  };
  const [state, setState] = React.useState({
    isActive: false,
  });

  return (
    <React.Fragment>
      <TextField id="name" />
      <FormGroup row>
        <FormLabel component="legend">Student Type</FormLabel>
        <FormControlLabel
          control={
            <Checkbox
              checked={state.isActive}
              onChange={handleChange("isActive")}
              value="isActive"
            />
          label="Active"
        />
      </FormGroup>
      <Button
        color="primary"
        onClick={() => {
            submit(user);
            //window.alert("confirm weather the name is correct.");
        }}
      >
        Submit
      </Button>
    </React.Fragment>
  );
};


      {kind === "john" && (
        <UserForm
          submit={props.submitUser}
          name={""}
        />
      )}


export type nProps =
  | {
      userType: "john";
      submitUser: (
        user: string
      ) => void;
    }
  | 

---

如果您试图创建react功能组件，则您的功能签名格式不正确。react组件采用单个props参数

const UserForm = ({
  submit: (user: string) => void,
  name: string,
}) => { ... }

请注意它们周围的花括号

如果对象破坏看起来有点混乱，考虑这个等效代码

const UserForm = props => {
  const { submit, name } = props; // propTypes/shape defined externally
  ...
}