javascript - 是否可以在 React Typescript 中将组件 prop 接口(interface)与另一个 prop 一起使用？

Question

基本上，我希望 injectComponentProps: object 行动态绑定(bind)到 injectComponent 的 prop 接口(interface)。在本例中，它将是 injectComponentProps: InjectedComponentProps，但我希望它是动态的。

I.e 一旦在 中设置了 injectComponent Prop ，injectComponentProps 就被定义为任何 injectComponent 的组件 Prop 。

这可能吗？

interface InjectedComponentProps {
  variant: string
  size: number
}

const InjectedComponent: React.FC<InjectedComponentProps> = (props) => {
  return <Text {...props}>hello</Text>
}

interface ComponentProps {
  injectComponent: React.ReactType
  injectComponentProps: object
}

const Component: React.FC<ComponentProps> = (props) => {
  const InjectedComponent = props.injectComponent
  return (
    <>
      <InjectedComponent {...props.injectComponentProps}/>
    </>
  )
}


const Main: React.FC = () => {
  return (
    <Component
      injectComponent={InjectedComponent}
      injectComponentProps={{ variant: 'footnote', size: 14 }}
    />
  )
}

Answer 1

interface InjectedComponentProps {
  variant: string
  size: number
}

const InjectedComponent: React.FC<InjectedComponentProps> = (props) => {
  return null
}

interface ComponentProps<T> {
  injectComponent: React.FC<T>
  injectComponentProps: T
}

const Component = <T extends {}>(props: ComponentProps<T>): JSX.Element => {
  const InjectedComponent = props.injectComponent
  return (
    <>
      <InjectedComponent {...props.injectComponentProps}/>
    </>
  )
}


const Main: React.FC = () => {
  return (
    <Component
      injectComponent={InjectedComponent}
      injectComponentProps={{ variant: 'footnote', size: 14 }}
    />
  )
}