获取传入 props 的组件的 props 类型

Question

我想创建一个具有这样类型的 React Native 组件，它接受一个组件并对其应用一些样式：

interface Props {
  component: any;
 }
 const Component: React.FC<Props> = ({component}) => {
  const Styled = styled(component)`
    background-color: red;
  `;
 }

我想要的是像这样在 props 中获取组件的 props 类型：

<Component component={Pressable} onPress={() => console.log("sds")} /> //Should accept this props
<Component component={Image} source={{}} /> //Should accept Image props

我怎样才能做到这一点？提前致谢。

Answer 1

使用您将使用的组件的 props 创建一个泛型类型。

type Props<P> = P & {
  component: (new (props: P) => React.Component<P>) | React.FC<P>;
};
function Component<P>(props: Props<P>): JSX.Element {
  return <props.component {...props}></props.component>;
}

class X extends React.Component<{ p: string }> {}
const Y: React.FC<{ p: number }> = props => <></>;
<Component component={X} p="something"></Component>;
<Component component={Y} p={1}></Component>;

很遗憾，您将无法使用 React.FC<Props<P>> 类型，因为 P 出现在函数表达式之前，这使得 TypeScript 抱怨 cannot find name 'P'。