Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

347
Visualizações
Type is not assignable to type 'IntrinsicAttributes

I have this component

import React, { FunctionComponent, useEffect } from 'react';
import shouldForwardProp from '@styled-system/should-forward-prop';
import styled from 'styled-components';

const delay = 0.25;

interface FadeInSectionProps {
  offset?: number;
  children: React.ReactNode;
}

const Section = styled.div.withConfig({
  shouldForwardProp,
})<{ offset?: number }>`
  transition: 0.5s ease-in-out opacity, 0.5s ease-in-out transform;
  opacity: 0;
  transform: translate(0, -40px);

  &.fade-in-section--is-visible {
    opacity: 1;
    transform: translate(0, 0);
  }

  transition-delay: ${(props) => (props.offset ? props.offset * delay + 's' : '0s')};
`;

export const FadeInSection: FunctionComponent = ({ offset, children }: FadeInSectionProps) => {
  const [isVisible, setVisible] = React.useState(false);
  const domRef = React.useRef();
  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setVisible(true);
        }
      });
    });

    observer.observe(domRef.current);
  }, []);
  return (
    <Section
      className={`fade-in-section ${isVisible ? 'fade-in-section--is-visible' : ''}`}
      ref={domRef}
      offset={offset}
    >
      {children}
    </Section>
  );
};

export default FadeInSection;

Which I'm using (after importing it) like so:

<FadeInSection>
   <Header />
<FadeInSection>

or

<div>
   <FadeInSection>
     <Item1 />
   </FadeInSection>
   <FadeInSection offset={1}>
     <Item1 />
   </FadeInSection>
</div>

But when I pass the prop offset I get this ts error (even that works as I expected) enter image description here

En english:

    Type '{ type: string; name: string; value: string; onChange: (e: any) => void; placeholder: string; label: string; }' is not assignable to type 'IntrinsicAttributes & InputProps & { children?: ReactNode; }'.
  Property 'type' does not exist on type 'IntrinsicAttributes & InputProps & { children?: ReactNode; }'.ts(2322)

What I'm doing wrong? Or how Can I get rid of this error?

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

try changing const FadeInSection: FunctionComponent = ({ offset, children }: FadeInSectionProps) to const FadeInSection: FunctionComponent<FadeInSectionProps> = ({ offset, children })

You type the component with FunctionComponent instead of props, so you can use internal props like children, without the need to type them. (you can actually remove children from your interface, cause it exists on FunctionComponent interface). What is happening is that you specify the type of const FadeInSection not the type of props, so when you used it previously, compiler didn't look into your interface at all

about 4 years ago · Juan Pablo Isaza Relatório

0

Like this the warning in the ide was gone and also the errors in the lint command

export const FadeInSection: FunctionComponent<FadeInSectionProps> = ({
  offset,
  children,
}: FadeInSectionProps) => {
   return (<Section />);
}
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda