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

Question

我想用这样的类型创建一个React Native组件，它接受一个组件并为它应用一些样式:

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

我想要的是像这样获得在props中传递的组件的prop类型:

<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'。