reactjs - typescript 调用连接的子引用实例方法

Question

简单来说，我有一个由 redux 连接的子组件

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

export default connect()(Child);

并且父级包含它

class Parent extends React.Component {
    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} />
        );
    }
}

我试图设置泛型类型

<React.ComponentType<Child>>

在导出子组件时明确显示，但仍然无法正常工作。

Answer 1

我遇到了同样的问题，找不到合法的解决方案。但是，我确实通过重新声明类型为“any”的子组件来设法破解它，如下所示:

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

    bar () {
        if (this.childRef.current) {
            const childRef: any = this.childRef.current;
            childRef.foo();
        }
    }

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

如果你曾经设法想出一个更好的解决方案，我想听听。