HOC 中的样式化组件答案

【问题标题】：Styled component in HOCHOC 中的样式化组件
【发布时间】：2019-12-12 19:13:39
【问题描述】：

我想使用高阶组件向我的组件包装器添加样式。 Typescript 说ComponentWithAdddedColors 有错误。

type Props = {
  bg?: string;
};

function withColors<TProps>(
  Component: React.ComponentType<TProps>
): React.ComponentType<TProps & Props> {

  const ColoredComponent: React.ComponentType<TProps & Props> = props => {
    const { bg, ...componentProps } = props;

    const ComponentWithAdddedColors = styled(Component)`
      ${bg && `background: ${bg};`}
    `;

    return <ComponentWithAdddedColors {...componentProps} />; //Typecheck error
  };

  return ColoredComponent;
}

当我想返回使用{...componentProps} 传递给 HOC 的组件时，也会出现类型检查错误。

...
{
  const ColoredComponent: React.ComponentType<TProps & Props> = props => {
    const { bg, ...componentProps } = props;

    return <Component {...componentProps} />; //Typecheck error
  };

  return ColoredComponent;
}

但是，当我使用 {...props} 将所有内容传递给组件时，没有类型检查错误。

...
{
  const ColoredComponent: React.ComponentType<TProps & Props> = props => {
    return <Component {...props} />; //No error
  };

  return ColoredComponent;
}

【问题讨论】：

你得到的类型错误到底是什么？
pastebin.com/uzMmexdf
你为什么不喜欢 styled-components 中的主题支持？ styled-components.com/docs/advanced#theming

标签： reactjs typescript styled-components

【解决方案1】：

这是你想要做的吗？

export function withColors<T>(Component: React.ComponentType<T>) {
    return styled(Component)<Props>`
        ${({ bg }) => bg && `background: ${bg};`}
    `
}

const Foo: React.FC<{ bar: string }> = props => <div>{props.bar}</div>
const ColoredFoo = withColors(Foo)
export const redFoo = <ColoredFoo bg="red" bar="baz" />

但是，如果您想锁定颜色而不暴露颜色道具，那么恐怕您可能已经暴露了 TypeScript 错误。我自己似乎无法绕过它（不使用additionalProps as any）；但是，我的做法确实有点不同。

function withColors<T>(Component: React.ComponentType<T>, additionalProps: Props) {
    const { bg } = additionalProps;
    const ComponentWithAddedColors = styled(Component)<Props>`
        ${bg && `background: ${bg};`}
    `
    const result: React.FC<T> = props => (
        <ComponentWithAddedColors {...props} {...(additionalProps as any)} />
    )
    return result
}

export const RedFoo = withColors(Foo, { bg: 'red' })

【讨论】：