Question

当前，在使用名为React-Scroll-Parallax的库时遇到错误。 JS没问题，但TS一直对我说如下：

import * as React from 'react';
import { ParallaxProvider, ParallaxBanner } from 'react-scroll-parallax';
import styled from 'styled-components';

interface SubBannerProps {
  height?: string;
  style?: any;
  backgroundImage?: any;
}

const Wrapper = styled.div<SubBannerProps>`
  margin: 800px 0;
`;

const SubBanner: React.FC<SubBannerProps> = ({ height }) => {
  return (
    <Wrapper height={height}>
      <ParallaxProvider>
        <ParallaxBanner
          layers={[
            { image: 'assets/images/main-image.png',
              amount: 0.5,
            },
          ]}
          style={{
            height: '300px',
          }}
        />
      </ParallaxProvider>
    </Wrapper>
  );
};

export default SubBanner;

似乎该库不支持当前的TS，那么如何解决该问题呢？我需要在TS上使用它。

Property 'children' is missing in type '{ image: string; amount: number; }' but required in type 'BannerLayer'.ts(2741)

Answer 1

通常，当您尝试在React组件中使用children时明确抛出该错误（不会暴露children道具）时，会引发此错误。

interface IComponentProps {
   image:string;
   amount:number;
}

<Component image="image" amount={1}>
  <p>This will throw</p>
</Component>

但是如果您将其添加到道具（类型）中，它将接受它

interface IComponentProps {

   image:string;
   amount:number;

  children: ReactNode;
}

Answer 2

该问题来自react-scroll-parallax的键入，已通过v2.3.3解决。

类型'{image：string;类型中缺少属性'children'；数量： }”，但在“ BannerLayer”类型中为必填项。 TS2741

2 个答案: