Question

我尝试不要在render方法中实例化样式化的组件，但是我需要组件的道具来创建样式，我可以在render方法之外使用一个简单的功能组件来做到这一点吗？我的打字稿出现以下错误：

没有重载匹配此调用。重载1，共2个，'（（props：Pick，HTMLElement>，“ style” |“ title” |“ key” |“ defaultChecked” | ... 250更多... |“ onTransitionEndCapture”>＆{...;} ＆{...;}，“样式” | ... 257更多... |“ rowEnd”>＆Partial <...>，“样式” | ... 257更多... |“ rowEnd”> ＆{...;}＆{...;}）：ReactElement <...>'，出现以下错误。类型'{children：Element []; className：字符串； }'从类型'Pick，HTMLElement>，“ style” |中缺少以下属性。 “标题” | “钥匙” | “ defaultChecked” | ... 250更多... | “ onTransitionEndCapture”>＆{...; }＆{...; }，“样式” | ... 257更多... | “ rowEnd”>＆Partial <...>，“样式” | ... 257更多... | “ rowEnd”>'：照片，rowStart，rowEnd 重载2，共2个，'（属性：StyledComponentPropsWithAs <“ figure”，any，{照片：照片； rowStart：数字； rowEnd：数字；}，从不>）：ReactElement，字符串| ... 1更多... | （new（props：any）=> Component <...>）>'，出现以下错误。类型'{children：Element []; className：字符串； }'从类型'Pick，HTMLElement>，“ style” |中缺少以下属性。 “标题” | “钥匙” | “ defaultChecked” | ... 250更多... | “ onTransitionEndCapture”>＆{...; }＆{...; }，“样式” | ... 257更多... | “ rowEnd”>＆Partial <...>，“样式” | ... 257更多... | “ rowEnd”>'：照片，rowStart，rowEnd

 type MyProps = {
    className: string,
    photo: IPhoto,
    rowStart: number,
    rowEnd: number,
}

const Figure = styled.figure<{photo: IPhoto, rowStart: number, rowEnd: number}>`
grid-column-start: ${props => props.photo.colStart};
grid-column-end: ${props => props.photo.colEnd};
grid-row-start: ${props => props.rowStart};
grid-row-end: ${props => props.rowEnd};
`; 


const Photo = (props: MyProps) => {
    return (
        <Figure className={props.className}>
            <Link to={`/photo/${props.photo.id}`}>
                <img src={props.photo.url_c} alt={props.photo.title} />
            </Link>
            <figcaption>{props.photo.title}</figcaption>
        </Figure>
    )
}

export default Photo;

具有功能组件道具的动态样式组件

0 个答案: