0
346
ViewsEl tipo no se puede asignar al tipo 'IntrinsicAttributes
tengo este componente
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;Que estoy usando (después de importarlo) así:
<FadeInSection> <Header /> <FadeInSection>o
<div> <FadeInSection> <Item1 /> </FadeInSection> <FadeInSection offset={1}> <Item1 /> </FadeInSection> </div> Pero cuando paso el desplazamiento de prop, aparece este error ts (incluso eso funciona como esperaba) 
en ingles:
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)¿Qué estoy haciendo mal? ¿O cómo puedo deshacerme de este error?
2 answers
Answer question0
intente cambiar const FadeInSection: FunctionComponent = ({ offset, children }: FadeInSectionProps) a const FadeInSection: FunctionComponent<FadeInSectionProps> = ({ offset, children })
El componente se escribe con FunctionComponent en lugar de props, por lo que puede usar props internos como children , sin necesidad de escribirlos. (en realidad, puede eliminar niños de su interfaz, porque existe en la interfaz de FunctionComponent). Lo que sucede es que especifica el tipo de const FadeInSection, no el tipo de accesorios, por lo que cuando lo usó anteriormente, el compilador no analizó su interfaz en absoluto.
0
Así desapareció la advertencia en el ide y también los errores en el comando lint
export const FadeInSection: FunctionComponent<FadeInSectionProps> = ({ offset, children, }: FadeInSectionProps) => { return (<Section />); }