临时反应组件中的样式化组件

Question

在 react 的 hoc 包装器中使用样式化组件有两个问题。

1. 组件已渲染，但未使用背景颜色。
2. ComponentWithAddedColors 不是有效的打字稿。不知道为什么。

谁能帮忙解决这个问题？

interface IProps {
  id: string;
  left: number;
  top: number;
}

export const Node: React.FC<IProps> = ({ id, left, top }) => {
  return (
    <Container left={left} top={top}>
      {id}
    </Container>
  );
};

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

const DraggableNode = withColors(Node);
export default DraggableNode;

我制作了一个代码沙箱来说明这个问题： https://codesandbox.io/s/styled-hoc-xgduo?file=/src/Components/Node/Node.tsx

Answer 1

样式错误说明

@Mosh Feu 的评论为我指明了正确的方向。

您可以添加样式to an already styled component，也可以添加样式to a custom component，但这两者的工作方式不同。你有一条贯穿这两种类型的链，所以东西会丢失。

当您调用withColors(Node) 时，它所做的是将生成的className 属性传递给Node。但是你的自定义组件 Node 从来没有对这个 prop 做任何事情，所以这个样式永远不会被应用。

styled 方法在您自己或任何第三方组件上都能完美运行，只要它们将传递的 className 属性附加到 DOM 元素。

样式错误已修复

如果我们编辑Node 来使用这个className，我们就会得到颜色！

export const Node: React.FC<IProps & {className?: string}> = ({ id, left, top, className}) => {
  return (
    <Container left={left} top={top} className={className}>
      {id}
    </Container>
  );
};

TS 错误说明

就打字稿错误而言，您在将您的道具 T 分配给样式组件 (ComponentWithAddedColors) 的道具时遇到错误，这显示为一堆疯狂的废话：

(props: (Pick>) | (PropsWithRef & {}), Exclude<...> | ... 1 更多。 .. | 排除<...>> & 部分<...>, 排除<...> | ... 1 更多 ... | 排除<...>> & { ...; } & { ...; }) | (Pick<...> & ... 2 更多 ... & { ...; })): ReactElement<...>

这主要是因为通过ForwardRefExoticComponent类型的ref转发。

但是我们可以向后工作，使用实用程序类型从组件类型中获取预期的道具类型：

type PropsOf<T> = T extends React.ComponentType<infer P> ? P : never;

所以ComponentWithAddedColors 有道具PropsOf<typeof ComponentWithAddedColors>。我们可以使用它，但我们也知道ComponentWithAddedColors 的类型为StyledComponent<React.ComponentType<T>, any, {}, never>，所以我们可以更进一步：

type StyledProps<InitialProps> = PropsOf<StyledComponent<React.ComponentType<InitialProps>, any, {}, never>>

所以ComponentWithAddedColors 有道具StyledProps<T>。

修复了 TS 错误

也就是说，所有这些都是不必要的，至少在您展示的示例中是这样。您将ComponentWithAddedColors 的所有道具传递给ComponentWithAddedColors，因此result 与组件本身相同。直接退货就好了。

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