reactjs - React-Form(v7) Reactstrap 与 Typescript

Question

我的打字稿表现得很奇怪，需要帮助来解决它。
我正在尝试将redux-form(v7)与reactstrap一起使用

表格.tsx

<Field
    type="text"
    component={InputField}
/>
<Field
    type="password"
    component={InputField}
/>

输入字段

import {Input} from 'reactstrap';
import {WrappedFieldProps} from 'redux-form/lib/Field';

type Props = {
  type?: string;
}

const InputField = (props: WrappedFieldProps & Props) => {
  const { type, input } = props;
  return(
    <Input
      type={type}
      {...input}
    />
  );
};

在那种情况下，我得到了 Typescript 错误：TS2322

    Types of property 'type' are incompatible.
      Type 'string | undefined' is not assignable to type '"number" | "select" | "textarea" | "text" | "hidden" | "color" | "email" | "file" | "radio" | "ch...'.
        Type 'string' is not assignable to type '"number" | "select" | "textarea" | "text" | "hidden" | "color" | "email" | "file" | "radio" | "ch...'.

但是，如果我更改type?: string为type?: InputType; （ type from reactstrap import {InputType} from 'reactstrap/lib/Input'; ），那么它会解决InputField中的问题，但随后我会在Form.tsx中遇到相同的错误

标签： reactjstypescriptredux-formreact-redux-formreactstrap

Answer 1

一个老问题，但我也在寻找这个问题的答案。我发现的一些解决方案：

<Input type={"text" as any} />

或者

import { Input } from 'reactstrap';
import { InputType } from 'reactstrap/lib/Input'

let type:InputType = "text"  // You can use Ctrl+Space on VSC for "enum"'d values
<Input type={type} />

或者

import { Input, InputProps, ButtonProps } from 'reactstrap';

type InputElement = {
  [name:string]:InputProps
}
type BtnElement = {
  [name:string]:InputProps
}

let inputElement:InputElement = {

  login: {
    onChange: this.handleChange,
    onKeyDown: this.handleKeydown,
    value: this.state.username,
    type: "text",
    placeholder: "Username",
    name: "username"
  }
}
let btnElement:BtnElement = {
  submitBtn:{
    onClick:() => this.submit(),

  }
}

<Input {...inputElement.login} />
<Button {...btnElement.submitBtn}>Login</Button>