带有样式组件的高阶组件的类型

时间:2021-06-29 11:55:27

标签: reactjs typescript react-native styled-components

我正在尝试创建一个工厂函数来创建组件,但我无法获得正确的类型。

下面我将它与 Inner 一起使用,但最终,我希望能够将此函数与任何具有 style.marginTop 的组件一起使用。

这是我得到的:

const Inner = styled.View`
  margin-right: auto;
`;
type InnerProps = React.ComponentProps<typeof Inner>;

const withOffset = <T/*,*/>(
  Component: React.ComponentType<T>
) => (props: T): ReactElement => {
  const { top } = useSafeArea();
  const { style, ...restProps } = props;
  const newStyle = { marginTop: top, ...StyleSheet.flatten(style) };
  return <Component style={newStyle} {...restProps} />;
};

export const InnerWithOffset = withOffset<Inner>(
  Inner
);

我如何为这种情况编写类型?

0 个答案:

没有答案