Question

我正在尝试创建一个 TextInput 组件，它有 3 个必需的参数，其他的应该作为 ...rest 传递，所以我可以在任何形状中使用 TextInput 可以接受的任何道具重用这个组件。我已经相应地声明了一个组件和接口：

interface IInput {
  styles: ViewStyle
  name: string
  control: Control
  rest: TextInputProps[]
}

export const Input = (props: IInput): JSX.Element => {
  const { control, name, styles, ...rest }: IInput = props
  const { field } = useController({
    control,
    defaultValue: '',
    name,
  })
  return (
    <TextInput
      value={field.value}
      onChangeText={field.onChange}
      style={styles}
      {...rest}
    />
  )
}

但是当我尝试使用它时

<Input
  styles={styles.input}
  name="asd"
  control={control}
  keyboardType="email-address"
/>

我收到了Type '{ styles: { width: string; height: number; marginLeft: number; fontSize: number; color: string; }; name: string; control: Control<FieldValues>; keyboardType: string; }' is not assignable to type 'IntrinsicAttributes & IInput'. Property 'keyboardType' does not exist on type 'IntrinsicAttributes & IInput'.警告。
怎么做？任何帮助将不胜感激。

Answer 1

我认为这是您想要实现的更简单的方法：

interface IInput extends TextInputProps {
  styles: ViewStyle
  name: string
  control: Control
}

export const Input = (props: IInput): JSX.Element => {
  const { control, name, styles }: IInput = props
  const { field } = useController({
    control,
    defaultValue: '',
    name,
  })
  return (
    <TextInput
      value={field.value}
      onChangeText={field.onChange}
      style={styles}
      {...props}
    />
  )
}

<Input
  styles={styles.input}
  name="asd"
  control={control}
  keyboardType="email-address"
/>

React Native TextInput 属性在类型“IntrinsicAttributes & IInput”上不存在

1 个答案: