javascript - Type is not assignable to type 'IntrinsicAttributes - Stack Overflow

admin管理员组

文章数量:1384158

I have this ponent

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

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)

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?

I have this ponent

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

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)

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?

• javascript
• reactjs
• typescript
• react-props
• children

Share Improve this question Follow edited Sep 1, 2021 at 10:55 Toni Michel Caubet asked Sep 1, 2021 at 9:34 Toni Michel CaubetToni Michel Caubet 20.2k5858 gold badges218218 silver badges388388 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

You type the ponent 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, piler didn't look into your interface at all

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

export const FadeInSection: FunctionComponent<FadeInSectionProps> = ({
  offset,
  children,
}: FadeInSectionProps) => {
   return (<Section />);
}

本文标签： javascriptType is not assignable to type 39IntrinsicAttributesStack Overflow