Ytukyg

I have an abstract class in "File1":

// File1.tsx



import * as React from 'react';



export interface IProps {

  prop1: string;

  prop2: number;

}



export abstract class Something extends React.Component<IProps> {

  public typeName: string;

}

then, in other file (File2) i define infinite classes extending from abstract class Something:

// File2.tsx



import { Something } from './File1';



export class Something1 extends Something {

  public typeName: string = 'Type1';



  public render() {

    return <div>Something 1</div>

  }

}



export class Something2 extends Something {

  public typeName: string = 'Type2';



  public render() {

    return <div>Something 2</div>

  }

}

Now, here is my problem:
In a 3rd File, i import the classes defined before (Something1 or Something2) and then i passing this class to 2 different components: ReadProperty and RenderComponent. In the first component i need accessing to the property typeName of the class and do some stuff and in the second file i need render that class:

// File3.tsx



import { Something } from './File1';

import { Something1, Something2 } from './File2';



interface IReadProperty {

  something: Something;

};



const ReadProperty: React.SFC<IReadProperty> = ({ something }) => {

  // here i can access to property typeName. No problem here.



  something.typeName // Type1 | Type2 | ... Infinite



  ...do some stuff

}





interface IRenderComponent {

  something: Something;

}



const RenderComponent: React.SFC<IRenderComponent> = ({ something }) => {

  // i need do some stuff here before render "something" component

  // here i get an error when i try render the component

  return <something />;

}





const Main: React.SFC = () => {

  return (

    <div>

      <ReadProperty something={Something1} />

      <RenderComponent something={Something1} />

    </div>

  );

}

but when i try to render the component in RenderComponent, i get the follow error: TS2604: JSX element type 'something' does not have any construct or call signatures.

What is wrong here? i defined type 'something' as abstract Class Something because i can define infinite Classes that extend from Something, so i can't define using: something: Something1 | Something2 | Something50 ...;

here is an example that i trying to do: https://codesandbox.io/s/18yzvkx8jj

The issue is that in your definition of IRenderComponent, you're saying that something is an instance of Something, whereas what you want is a constructor type. One other thing is that React generally complains when you try to instantiate components with lowercase names. Try this:

interface IRenderComponent {

  Something: new (props: IProps) => Something1;

};



const RenderComponent: React.SFC<IRenderComponent> = ({ Something }) => {

  return <Something prop1="foo" prop2={3} />;

}

For IReadProperty, it looks like you do want an instance of Something (since you want to access typeName, which is an instance property). However, you can't actually pass an instantiated component:

<ReadProperty something={<Something1 prop1="" prop2={3} />;} /> //Error

This is because <Something1 ... /> isn't actually an instance of Something1 - it's an instance of JSX.Element. You could pass an instance of Something1, like this:

<ReadProperty something={new Something1({prop1: "", prop2: 3})} />

But I imagine that's not what you want, since you can't actually use the resulting instance in rendering.

The best way to address the IReadProperty issue depends on what you're actually trying to accomplish. In general, React favors composition over inheritance and reflection, so it might be easier to consider how to achieve your goal by starting with base components and composing them, or using higher-order components.

1. Make sure that you have jsx:react in tsconfig.json
   


2. Make sure that you have consistent version of react react-dom @types/react and @types/react-dom package versions.