CODEWITHSUNDEEP
reactjstypescript
Alex
Alex

Reputation: 14513

Getting a reference to the class instance of a component

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?

Upvotes: 15

Views: 21624

Answers (3)

Jacksonkr
Jacksonkr

Reputation: 32247

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);

Upvotes: 4

Nitzan Tomer
Nitzan Tomer

Reputation: 164347

You have a few options:

(1) Use the return value from ReactDOM.render:

var element = ReactDOM.render(<MyComponent />, myDomElementContainer);

(2) Use React.createElement:

var element = React.createElement(MyComponent);
ReactDOM.render(element);

(3) Use refs:

var element;
ReactDOM.render(<MyComponent ref={el => element = el } />, myDomElementContainer);

The instance will be assigned to element when the instance of MyComponent has been rendered.

Upvotes: 17

Artem Dudkin
Artem Dudkin

Reputation: 588

Looks like you use React.js in a way you using jQuery, and it is not ok. Really, I cannot imagine case that requires doing such things; and I suspect that you should not do this. Please, (1) use jsx to create components, (2) use refs to found component at that jsx. Like

...

x(){
    this.refs.c.style={color:'blue'}
}

render() {
    return <div ref='c' style={{border:'1px solid red', height:10}} onClick={this.x.bind(this)}/>
}

Upvotes: 0

Related Questions