类型不能赋值给类型'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>

但是当我传递属性偏移量时，我得到了这个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

如下所示，ide中的警告和lint命令中的错误都消失了。

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

Answer 2

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

您可以使用FunctionComponent而不是props来键入组件，因此您可以使用像children这样的内部props，而无需键入它们。(您实际上可以从接口中删除子项，因为它存在于FunctionComponent接口上)。实际情况是，您指定的是const FadeInSection的类型，而不是props的类型，所以当您以前使用它时，编译器根本不会检查您的接口