类型不可分配给类型 'IntrinsicAttributes

Question

我有这个组件

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;

我正在使用（导入后），如下所示：

<FadeInSection>
   <Header />
<FadeInSection>

或

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

但是当我传递 prop offset 时，我得到了这个 ts 错误（即使它按我预期的那样工作）

英语：

    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)

我做错了什么？或者我怎样才能摆脱这个错误？

Answer 1

尝试将 const FadeInSection: FunctionComponent = ({ offset, children }: FadeInSectionProps) 更改为 const FadeInSection: FunctionComponent<FadeInSectionProps> = ({ offset, children })

您使用 FunctionComponent 而不是 props 键入组件，因此您可以使用 children 等内部 props，而无需键入它们。（您实际上可以从界面中删除 children，因为它存在于 FunctionComponent 界面上）。发生的事情是你指定了 const FadeInSection 的类型而不是 props 的类型，所以当你之前使用它时，编译器根本没有查看你的界面

Answer 2

就像这样，ide 中的警告消失了，lint 命令中的错误也消失了

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

类型不可分配给类型 'IntrinsicAttributes

Type is not assignable to type 'IntrinsicAttributes

javascript

children

typescript

reactjs

react-props