获取Typescript类型作为值

Question

我有这样的组件

type TestComponentProps = {
title: string;
}
const TestComponent: React.FC<TestComponentProps> = ({
title,
}) => {
return <div>TestComponent: {title}</div>;
};
type TestComponent2Props = {
body: string;
}
const TestComponent2: React.FC<TestComponent2Props> = ({ body }) => {
return <div>TestComponent2: {body}</div>;
};

我需要一个接口，允许我配置渲染哪个组件，并获得该特定组件的道具

const dataToRender:Array<{
component: TestComponent | TestComponent2,
data: propsOf<component>
}> = [
{
component: TestComponent,
data: { title: '123' }
},
{
component: TestComponent2,
data: { body: 'lorem ipsum' }
}
];

理想情况下，我需要以一种方式获得特定组件的道具"我想渲染这个组件，我只能接受基于该组件的道具的正确道具">

Answer 1

您可以这样做，但不能使用普通的typesciprt类型注释。特别是在vue js中，为了更好地键入，您需要使用defineComponent包装器，它只返回它的参数(id)，但带有类型。

在这种情况下，你可以使用这个函数。

function defineComponent<TProps, TModal extends React.ComponentType<TProps>>(x: {
component: TModal & React.ComponentType<TProps>
data: TProps
}) {
return x
}

并像这样使用:

const dataToRender = [
defineComponent({
component: TestComponent,
data: { title: "123" },
}),
defineComponent({
component: TestComponent2,
data: { title: "lorem ipsum" }, // error here
}),
] as const