-1

Tenho um componente de Input que utiliza o TextInput do React Native. Este componente deve aceitar a propriedade append, e qualquer outra propriedade que lhe for passada será atribuída ao componente TextInput:

interface InputProps {
  append: string;
}

const Input: React.FC<InputProps> = ({append, ...props}) => {
  return (
    <>
      <Append>{append}</Append>

      <TextInput {...props} />
    </>
  )
}

Utilização:

const Home: React.FC = () => {
  return (
    <View>
      <Input append="R$" placeholder="0,00" />
    </View>
  )
}

Neste caso, a propriedade placeholder é destacada como inválida por que ela não existe na interface que define as propriedades aceitas pelo componente Input.

Property 'placeholder' does not exists on type 'InstrinsicAttributes & InputProps & {children?: ReactNode;} TS(2322)

Já segui algumas sugestões como utilizar o React.HTMLAttributes<HTMLElement>, mas sem sucesso.

1 Resposta 1

0

Amigo tente passe as demais propriedades que não quer declarar no interface por fora da estruturação, assim:

interface InputProps {
  append: string;
}

const Input: React.FC<InputProps> = ({append}: InputProps, ...props) => {
  return (
    <>
      <Append>{append}</Append>

      <TextInput {...props} />
    </>
  )
}

Você deve fazer log-in para responder a esta pergunta.