Render React component from instantiated React.Component

Question

I have a couple of React components that are all based of the same base class, these component have a couple of properties which I would like to read before I render the component. This has to do with some conditions that are used somewhere else.

Currently I am calling a method, with something like this in my Render function.

public getWidget(): JSX.Element {

    let widget = null;
    switch (widgetType) {
        case 'widget1': {
            widgetComponent = new Widget1(props); // private variable in my class
            widget = (<Widget1 { ...props } ref = { some-ref });
        }
        case 'widget2': {
            widgetComponent = new Widget2(props); // private variable in my class
            widget = (<Widget2 { ...props } ref = { some-ref });
        }
    }
    return widget;
}

This way I can ask the widget some stuff about it's default values and render the widget variable in my Render function, like this:

render() {
    const widget = this.getWidget();

    const somethingIWantToKnow = this.widgetComponent.someProperty;

    return ({ widget });
}

From what I understand, the reference I set for my React Component is only available after I render? Otherwise I could just use that.

I also tried calling this.widgetComponent.render() in my own Render method, but this does not set up the component correctly (probably because of missing componentWillMount and componentDidMount calls.

I just can't believe this is the way to go, is there a way to render from this.widgetComponent in my Render method, or is there a way to get properties from the class behind a JSX.Element?

NULL checks and other stuff is all removed from these code snippets :)

Anurag Awasthi · Accepted Answer · 2018-07-20 06:29:33Z

1

Give your widget a ref,

widget = (<Widget1 { ...props } ref = { widget1 } />);

Then you can access your instantiated component in componentDidMount and use the ref to access the property,

componentDidMount(){
    const somethingIWantToKnow  = this.widget1.current.someProperty
}

answered Jul 20, 2018 at 6:29

Anurag Awasthi

6,2532 gold badges21 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Render React component from instantiated React.Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related