Reactjs 如何为样式化组件（用于TypeScript）正确定义引用（React.reObject<；StyledComponentClass>；）？

如何正确定义样式化组件的引用

我编写了以下测试代码。这是一段经过改进的代码，与前一段不同（）。添加了引用类型

StyledComponentClass<{}，any>

import React, {Component, RefObject, ReactNode} from 'react';
import styled, {StyledComponentClass} from 'styled-components';

type TModalShadowContainer = StyledComponentClass<{}, any>;

const ModalShadowContainer: TModalShadowContainer = styled.div` 
    background-color: black;
`;

export default class Modal extends Component {

    private readonly modalRef: RefObject<TModalShadowContainer>;

    constructor(props: {}) {
        super(props);
        this.modalRef = React.createRef<TModalShadowContainer>();
    }

    public render(): ReactNode {
        return (
            <ModalShadowContainer ref={this.modalRef}>
                {this.props.children}
            </ModalShadowContainer>
        );
    }

}

import React，{Component，reobject，ReactNode}从'React'导入；
从“styled components”导入styled，{StyledComponentClass}；
键入TModalShadowContainer=StyledComponentClass；
const ModalShadowContainer:TModalShadowContainer=styled.div`
背景色：黑色；
`;
导出默认类模式扩展组件{
私有只读modalRef:ReObject；
构造函数（props:{}）{
超级（道具）；
this.modalRef=React.createRef（）；
}
public render（）：ReactNode{
返回(
{this.props.children}
);
}
}

错误出现在以下行：

<ModalShadowContainer ref={this.modalRef}>

错误文本：

Type 'RefObject<StyledComponentClass<{}, {}, {}>>' is not assignable to type 'string | ((instance: Component<{ as?: string | ComponentClass<any, any> | StatelessComponent<any> | undefined; theme?: {} | undefined; }, any, any> | null) => any) | RefObject<Component<{ ...; }, any, any>> | undefined'.
  Type 'RefObject<StyledComponentClass<{}, {}, {}>>' is not assignable to type 'RefObject<Component<{ as?: string | ComponentClass<any, any> | StatelessComponent<any> | undefined; theme?: {} | undefined; }, any, any>>'.
    Type 'StyledComponentClass<{}, {}, {}>' is not assignable to type 'Component<{ as?: string | ComponentClass<any, any> | StatelessComponent<any> | undefined; theme?: {} | undefined; }, any, any>'.
      Property 'setState' is missing in type 'StyledComponentClass<{}, {}, {}>'.

类型“REOBJECT”不能分配给类型“string |”（（实例：组件| null）=>any）| REOBJECT |未定义”。
类型“REOBJECT”不可分配给类型“REOBJECT”。
类型“StyledComponentClass”不可分配给类型“Component”。
类型“StyledComponentClass”中缺少属性“setState”。

如何在typescriptlang中描述（定义）ref？

这可能会有所帮助

type MamkinHackerType<T> = T extends StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<infer ElementType>, infer ElementType>, infer T, infer H>
  ? ElementType & React.Component<React.DetailedHTMLProps<React.HTMLAttributes<ElementType>, ElementType> & T & H>
  : never
;

private readonly modalRef = React.createRef<MamkinHackerType<typeof ModalShadowContainer>>();

type MamkinHackerType=T扩展了StyledComponentClass
? 元素类型和反应组件
：从不
;
private readonly modalRef=React.createRef（）；

您在哪里找到此解决方案？只需查看要获取ts编译器的类型，并使用TypeScript条件类型“推断”即可。但我认为这不是一个好的解决方案。我们需要在react/styled componets打字方面进行全面改进。СПазззззззззазз！Для меня это пока высший полет)