属性'children'在类型 '{ image: string; amount: number; }' 中缺失，但在类型"横幅图层"中是必需的。TS2741

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修复。