Getting a reference to the class instance of a component

Question

I have a typescript class that extends React.Component:

class MyComponent extends React.Component<{}, {}>
{
    constructor(props: {})
    {
        super(props);
    }

    public render()
    {
        return <span>Test</span>;
    }

    public MyMethod() {
        console.log("Working fine");
    }
}

Then there is a place where I manually have to create an instance and attach this to the DOM:

var component = MyComponent;
var element = React.createElement(component, {}, null);
ReactDOM.render(element, myDomElementContainer);

Due to architectural constraints of the system, I need to store a reference to my class instance for that component for later use, problem is that I can not find any reference to the instance of my class in the created element, it only have a reference to the class via the property type.

React.createElement is only allowing me to supply the class, and ReactDOM.render does not like a manually instantiated object.

What should I in order to instantiate a custom component, attach it to the DOM and get a reference to the instance of my component class?

Answer 1

For my scenario I used a singleton (static variable)

export let instance = null;

class SearchDialogue extends React.Component {
    constructor(props) {
        super(props);

        instance = this;
    }
}

then when you need to reference it you can run

import {instance as searchDialogueInstance} from './SearchDialogue'

console.log(searchDialogueInstance.someFooBar);

Note

Keep in mind that this only works WELL if you're leveraging the singleton design pattern. If you are not then you could turn the static var into an array and on push new instances into the array. Careful as this could get you into trouble if you are not already familiar with potential memory pitfalls.

SearchDialogue.instances.push(this);