根据配置动态推断道具类型答案

【问题标题】：Dynamically infer prop type based on config根据配置动态推断道具类型
【发布时间】：2023-01-15 07:45:26
【问题描述】：

是否可以根据同一道具中提供的组件类型动态推断正确的道具类型？

目前我有组件可以根据提供的组件类型正确推断出预期的道具。

export interface IFieldTypeProps<TComponent extends React.ComponentType<any>> {
  type: TComponent;
  props: React.ComponentProps<TComponent>;
}

export function Field<TComponent extends React.ComponentType<any>>({
  type: Component,
  props,
}: IFieldTypeProps<TComponent>) {
  return <Component {...props} />;
}

<Field type={TextField} props={{ required: true, label: "First Name" }} />; // expected prop type inferred based on type prop

我想使用严格配置而不使用 JSX 来做类似的事情。这可能吗？

例子：

const fields = [
  {
    type: TextField,
    props: { required: true, label: "First Name" }, // Typecheck not working should infer props based on type above
  }, 
];

const Form = () => {
  return (
    fields.map((field) => {
      <field.type {...field.props}/>
    })
  )
}

【问题讨论】：

标签： reactjs typescript react-props

【解决方案1】：

这是一种利用函数参数推断来保持接近纯定义方式但添加强类型验证的方法：


    type Field<Props> = {
        Component: React.ComponentType<Props> | React.FC<Props>,
        props: Props,
    };
    
    const createField = <Props, >(
        Component: React.ComponentType<Props> | React.FC<Props>,
        props: Props,
    ): Field<Props> => ({
            Component,
            props,
        });
    
    const fields = [
        createField(
            TextField,
            { required: true, label: "First Name" },
        ),
        createField(
            TextField,
            { required: true, label: "Last Name" },
        ),
    ];
    
    export const Form = ({
    }) => (
        fields.map(({ Component, props }) => <Component {...props}/>)
    );

【讨论】：