我正在尝试在React + Typescript中实现动画。
interface IImageProps {
frame: number
width: number
src: string
onLoad: () => void
}
const Image = styled.img`
transform: ${(props: IImageProps) => css`translate(0, -${props.frame * props.width}px)`};
`
这会在控制台中引发警告：
styled-components.browser.esm.js:1507 Over 200 classes were generated for component styled.img.
Consider using the attrs method, together with a style object for frequently changed styles.
所以我正在尝试使用attrs：
const Image = styled.img.attrs((props: IImageProps) => ({
style: { transform: `translate(0, -${props.frame * props.width}px)` },
}))``
现在TS抱怨：
Type '{ src: string; onLoad: () => void; width: number; frame: number; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<Pick<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "src" | "width" | "children" | "style" | "title" | ... 255 more ... | "useMap"> & { ...; } & { ...; }, "src" | ... 259 more ... | "useMap"> & Partial<...>, "src" | ... 260 more ... | "useMap"> & { ...;...'.
Property 'frame' does not exist on type 'IntrinsicAttributes & Pick<Pick<Pick<Pick<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "src" | "width" | "children" | "style" | "title" | ... 255 more ... | "useMap"> & { ...; } & { ...; }, "src" | ... 259 more ... | "useMap"> & Partial<...>, "src" | ... 260 more ... | "useMap"> & { ...;...'.
我可以通过铸造来克服 const Image = ... `` as any
但是我不喜欢这样any。对于熟悉样式化组件代码的人来说，这可能是一个简单的答案...
您将需要IImageProps在最终加标签的模板调用中添加，以表明这些是除了<img>道具之外您的样式化组件所添加的自定义道具：
const Image = styled.img.attrs((props: IImageProps) => ({
style: { transform: `translate(0, -${props.frame * props.width}px)` },
}))<IImageProps>``
请注意，您也可以将类型注释从(props: IImageProps)移到.attrstype参数：
const Image = styled.img.attrs<IImageProps>(props => ({
style: { transform: `translate(0, -${props.frame * props.width}px)` },
}))<IImageProps>``
这样，props将成为您的自定义界面以及的所有内置道具img。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句