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

如果您想出一个更好的解决方案，我想听听。

打字稿调用连接的子引用实例方法

1 个答案: