Question

我在使用Typescript环境中withComponent()的{{1}}方法时遇到了麻烦。我有一个简单的样式组件，我想在React组件上应用。但是Typescript编译器抱怨道具不匹配。

我应该如何使用StyledComponent方法来获取样式组件，该组件还包含反应组件的道具？

withComponent()

错误消息：

import React from 'react';
import styled from 'styled-components';

const RedBackground = styled.div`
    background-color: red;
`;

interface MenuContainerProps {
    focus?: boolean;
}

class MenuContainer extends React.Component<MenuContainerProps> {
    static defaultProps = {
        focus: true,
    };

    render() {
        return (
            <div>MenuContainer</div>
        );
    }
}

const RedMenuContainer = RedBackground.withComponent(MenuContainer);
//                                       error here  ^^^^^^^^^^^^^

/*
    Usage of RedMenuContainer. It should have a red `background-color` and a `focus` prop.

    <RedMenuContainer focus={true}>
        ... children ...
    </RedMenuContainer>
*/

Answer 1

遗憾的是，这是Styled Component TypeScript类型的已知问题。现在的解决方法是强制使用正确的结果类型：

import styled, { StyledComponentClass } from 'styled-components';

// ...

type StyledRedMenuContainer = StyledComponentClass<MenuContainerProps, any, MenuContainerProps>
const RedMenuContainer = RedBackground.withComponent(MenuContainer as any) as StyledRedMenuContainer;

已经some work来修复withComponent的TypeScript类型，但我相信它可能会因为Styled Components 4.0而停滞，TypeScript类型从外部提取到DefinitelyTyped。

作为旁注，在这种情况下，您的MenuContainer需要接受className道具并将其传递给其子<div>，以便它实际上采用红色样式

如何正确使用带有样式组件withComponent（）的TS类型？

1 个答案: