更新

Question

我刚刚创建了一个动态组件，其外观应类似于下一个：

/ * 应该继承所有InputComponent属性。 DefaultComponent应该是默认的组件props值。 * /

<DynamicComponent component={InputComponent} />

我当前的实现类似于下一个：

type DefaultProps = { defaultProp: string }
type InputProps = { onChange: () => void }
type DynamicType<P> = DynamicProps & { component: ReactType<P> } & P

export default function DynamicComponent(props: DynamicProps & { component?: DefaultComponent } & DefaultComponentProps): ReactElement<DefaultComponentProps>
export default function DynamicComponent<P>(props: DynamicType<P>): ReactElement<P> {
    const { style: overrideStyle, component } = props
    const { style } = getStyle(props)
    const mergedStyle = { ...style, ...overrideStyle }
    return React.createElement(component, { ...props, style: mergedStyle })
};

DynamicComponent.defaultProps = { component: DefaultComponent }

所以我希望下一次会发生：

1。）当未定义组件时，我希望第一个替代（默认情况下是一个）

<DynamicComponent defaultProps='itsTotallyValid' /> // valid

2。）定义组件后，我希望继承其属性

<DynamicComponent component={InputComponent} onChange={() =>{}} /> // valid

由于某种原因，第二种情况永远不会发生，并且总是选择第一种情况。有没有一种更严格的方法，所以我可以迫使第二种情况成为可能？

更新

示例：https://codesandbox.io/s/quiet-architecture-zx60y

Answer 1

解决了注释中有关默认泛型类型阻止类型推断的问题，但实际情况并非如此，以下最小示例演示了对类型T（默认值为string）进行的类型推断，

function Bar<T = string>(props: { component: T }) : T {
  return props.component
}

Bar({ component : 'string' })
Bar({ component : 5 }) // <-- Type inferred to be number

TypeScript不会选择正确的替代

更新

1 个答案: