How to define a generic component and its corresponding configuration?

user_18570194 0
Viewed 167

I'm trying to write a generic component that receive a react component and its config.
My generic component should render the react component and apply its corresponding config prop.

For example:

type AProps = {
  name: string;
}

type BProps = {
  age: number;
}

type CProps = {
  address: string;
}

How can I call MyGenericComp with any component (be it AProps or BProps or CProps) so the config will be enforced?

I tried using generics like so:

type MyGenericComp<T extends (_:any) => JSX.Element> = {
  component: T;
  config: React.ComponentProps<T>;
}

But it doesn't work quite well because I need to define the generic type and it doesn't work with array of MyGenericComp

typescript-generics typescript-typings typescript reactjs
1 Answers

If I understand correctly, you can use this sample code to pass components to CustomeComponent

const AComponent=()=>{
  return (<div>A</div>)
  }
  const BComponent=()=>{
  return (<div>B</div>)
  }
  
  const CustomeComponent = ({Tag,...rest})=>{
  return(
  <Tag {...rest} />
  );
  }
export default function App() {
  return (
    <div className="App">
      <CustomeComponent Tag={AComponent} {...rest}/>
    </div>
  );
}
user_138842550
Related