Question

我正在将项目迁移到Typescript。我有一个使用样式组件样式化的组件，我需要在其他组件上用样式组件覆盖它。我的组件看起来像这样。

此组件旨在呈现图像，如果图像不存在，则返回使用styled-components样式化的Fallback元素。

import React, { useState } from 'react'
import styled from 'styled-components'

export const Fallback = styled.div`
    padding-bottom: 56%; /* 16/9 ratio */
    background-color: #e5e5e5;
`

export const Image = styled.img`
    image-rendering: pixelated;
    image-rendering: crisp-edges;
`

interface ImageWithFallbackProps {
    src: string
    alt: string
    fallback: typeof Fallback
}

const ImageWithFallback = ({
    src,
    alt,
    fallback = Fallback,
    ...props
}: ImageWithFallbackProps): React.ReactNode => {
    const [error, setError] = useState(false)
    const FallbackElement: React.FC = fallback

    if (error) return <FallbackElement />

    return <Image src={src} alt={alt} {...props} onError={() => setError(true)} />
}

export default ImageWithFallback

而且，我在另一个组件上使用它。

const Content: AnyStyledComponent = styled.div`
    /* styles */
`

Content.Text = styled.div`      
    font-weight: bold;
    flex: 1;
    text-align: left;
`

Content.Image = styled(ImageWithFallback)`
    flex: 1;
    max-width: 80px;
    align-self: baseline;
`

Content.Fallback = styled(Fallback)`
    width: 80px;
    padding-bottom: 54px;
`

但是在定义{。{1}}这样的Content.Image时出现错误。错误代码是ts（2769）。我该如何解决这个问题？

使用样式化组件进行样式化时键入React组件的最佳方法是什么

0 个答案: