[英]How to correctly define a reference (React.RefObject<StyledComponentClass>) for styled-components (for TypeScript)?
How to correctly define a reference for styled-components? 如何正确定义样式组件的引用?
I wrote the following test code. 我编写了以下测试代码。 This is a refined code, unlike the previous one ( How to correctly define a reference (React.RefObject) for styled-components (for TypeScript)? ).
与先前的代码( 如何正确地为样式化组件(对于TypeScript)定义引用(React.RefObject)? )不同,这是一种精炼的代码。 Added reference type
StyledComponentClass< {}, any>
. 添加了引用类型
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>
);
}
}
The error appears on the line: 错误出现在行上:
<ModalShadowContainer ref={this.modalRef}>
Error text: 错误文字:
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<{}, {}, {}>'.
How to describe (define) a ref in TypeScript lang? 如何在TypeScript lang中描述(定义)引用?
Maybe this helps. 也许这会有所帮助。
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>>();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.