样式组件需要什么严格类型? [英] What strict type does styled component need?

问题描述

所以这是我的 Hoc我创建了这个，所以我可以将我的样式保存在一个单独的文件中.唯一的问题是，样式组件的 ReactElement 失败了.我不确定用什么类型替换它?

So this is my Hoc I have created this so I can keep my styling in a separate file. Only problem is, the ReactElement is failing for styled component. I'm not sure what type to replace this with?

import React, { ReactElement } from 'react';
import styled from 'styled-components';

type TGetStyled = (props: { Component: ReactElement; pad: string }) => ReactElement;

const GetStyled: TGetStyled = ({ Component, pad }) => styled(Component)`
  a {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: inline-block;
    padding: ${pad};
    &:first-child {
      margin-left: 0;
    }
  }
`;
export default GetStyled;

我应该用什么类型来代替ReactElement"?

What type should I put in place of 'ReactElement'?

错误:

Type '({ Component, pad }: { Component: ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>; pad: string; }) => StyledComponent<...>' is not assignable to type 'TGetStyled'.
  Type 'String & StyledComponentBase<any, any, any, any> & NonReactStatics<any, {}>' is missing the following properties from type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>': type, props, key

No overload matches this call.
  Overload 1 of 2, '(component: AnyStyledComponent): ThemedStyledFunction<any, any, any, any>', gave the following error.
    Argument of type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>' is not assignable to parameter of type 'AnyStyledComponent'.
      Type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>' is not assignable to type 'StyledComponent<any, any, any, never>'.
        Type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>' is not assignable to type 'string'.
  Overload 2 of 2, '(component: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 157 more ... | FunctionComponent<...>): ThemedStyledFunction<...>', gave the following error.
    Argument of type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>' is not assignable to parameter of type '"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 157 more ... | FunctionComponent<...>'.
      Type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>' is not assignable to type 'FunctionComponent<any>'.
        Type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>' provides no match for the signature '(props: any, context?: any): ReactElement<any, any> | null'.

谢谢

推荐答案

我有一个比我之前的答案更好的解决方案，因为之前的答案可能会导致内存泄漏，正如 styled-components 所响应的那样

I have a better solution than my previous answer, as the previous answer can lead to memory leak as responded to in styled-components

import React from 'react';
import styled, { StyledComponent } from 'styled-components';
import { Link } from 'react-router-dom';

import { TStyles } from './Theme';

const StyleMe: TStyles = ({ theme: { blue1, blue2 } }) => `
  color: ${blue1};
  display: inline-block;
  &:hover {
    color: ${blue2};
  }
`;

const StyleComponent = (): StyledComponent<typeof Link, {}> =>
  styled(Link)`
    ${StyleMe}
  `;

export default StyleComponent;

用例.tsx

import React, { FC } from 'react';
import { withTheme } from 'styled-components';

import { TTheme } from './Theme';
import LinkStyle from './LinkStyle';

const LinkStyled = LinkStyle();

const MyComponent: FC<{ theme: TTheme }> = () => (
  <nav>
    <LinkStyled to="/somepath">some link</LinkStyled>
  </nav>
);

export default withTheme(MyComponent);

Theme.tsx

const theme = {
  blue1: '#22f',
  blue2: '#77f'
};

export type TTheme = typeof theme;

这也否定了删除任何开玩笑警告的必要性，这本身就有点老套了.

This also negates the need for any removal of jest warnings, which in itself was a bit hacky anway.

这篇关于样式组件需要什么严格类型?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！