reactjs - React with TypeScript：使用键的类型从通用对象数组中获取道具

Question

我正在尝试定义一个通用组件，该组件传递一个包含两个键的对象列表：component& props。我想推断props使用传递的组件类型的类型。

我到目前为止是这样的：

import React from 'react';

type ComposableComponentDefinition<C extends React.ComponentType = React.ComponentType> = {
  component: C;
  props: React.ComponentProps<C>;
};

const Compose: React.FC<ComposeProps> = ({ children, components = [] }) => {
  return (
    <>
      {components.reduceRight((acc, c) => {
        const Component = typeof c === 'function' ? c : c.component;
        const props = (typeof c === 'object' && c.props) || {};
        return <Component {...props}>{acc}</Component>;
      }, children)}
    </>
  );
};

Compose.displayName = 'Compose';

export type ComposeProps = {
  components: ComposableComponentDefinition[];
};
export default Compose;

我使用它如下：

<Compose
  components={[
    { component: SomeComponent, props: {  } },
    { component: AnotherComponent, props: anotherComponentProps },
  ]}
>

问题是，我不能让 TypeScript 编译器为我提供道具推断！即使我相信它拥有这样做所需的所有信息。

有人已经偶然发现了这种问题吗？

标签： reactjstypescript