react-redux-typescript-guide icon indicating copy to clipboard operation
react-redux-typescript-guide copied to clipboard

How to safely access instance properties declared in a class component with createRef

Open urielvan opened this issue 6 years ago • 3 comments

I have a child component connected by redux

class Child extends React.Component {
    foo () {}
}

export default connect()(Child);

and a parent contains it

class Parent extends React.Component {
    private childRef: React.RefObject<Child> = React.createRef()

    bar () {
        if (this.childRef.current) {
            /*
             * here typescript complains that 
             * Property 'foo' does not exist on
             * type 'ConnectedComponentClass<typeof Child...'
             */
            this.childRef.current.foo();
        }
    }

    render () {
        return (
            <Child ref={this.childRef} />
        );
    }
}

I've tried to set the generic type

<React.ComponentType<Child>>

explicitly when exporting child component, but still not working.

urielvan avatar Nov 27 '18 10:11 urielvan

@issuehuntfest has funded $20.00 to this issue. See it on IssueHunt

IssueHuntBot avatar Dec 04 '18 06:12 IssueHuntBot

@issuehunt has funded $20.00 to this issue.


IssueHuntBot avatar Apr 13 '19 06:04 IssueHuntBot

I am facing the same problem. Any solution / work around so far?

isolin avatar Apr 13 '20 15:04 isolin