Question

我正在用打字稿写React + Redux。我需要访问一个包装实例的引用，例如Property 'getWrappedInstance' does not exist on type 'ReactInstance'，但是得到了typescript错误items
我应该向{{1}}提供哪个界面？是否有我可以声明的Redux定义的界面，或者我需要创建自己的界面？我试图google并搜索stackoverflow但无法找到答案。

谢谢！

Answer 1

使用Flow时我们遇到了同样的错误，我们最资深的UI开发人员最终说要使用// $ FlowIgnore：一些评论

我认为，因为访问wrappedInstance是一种反模式流程，而打字稿可能不支持它...

如果有人有不同的答案，我很感兴趣。

Answer 2

我遇到了这个问题，虽然没有找到本机解决方案，但我确实设法创建了一个。以下是该解决方案的可行示例实现。

请注意{ withRef: true }函数中的connect。

这里是一种小的实用程序类型，用于添加缺少的定义。

// connect.ts

type WrappedConnectedComponent<T> = {
  getWrappedInstance(): T
}

export function unwrapConnectedComponent<T>(component: T): T | undefined {
  if (component) {
    const wrappedComponent: WrappedConnectedComponent<T> = component as any

    if (wrappedComponent.getWrappedInstance) {
      return wrappedComponent.getWrappedInstance()
    }
  }

  return undefined
}

这是一个简单的组件，稍后我们将进行访问。

// SomeOtherComponent.tsx

import * as React from 'react'
import { connect } from 'react-redux'

class SomeOtherComponent extends React.Component {
  log = () => {
    console.log('logged')
  }

  render() {
    return <div />
  }
}

const mapStateToProps = () => ({})
const mapDispatchToProps = () => ({})

const ConnectedSomeOtherComponent = connect(
  mapStateToProps,
  mapDispatchToProps,
  null,
  { withRef: true } // Important
)(SomeOtherComponent)

export default ConnectedSomeOtherComponent

export { SomeOtherComponent }

这是完成所有工作的主要组件。

// SomeComponent.tsx

import * as React from 'react'
import ConnectedSomeOtherComponent, { SomeOtherComponent } from './SomeOtherComponent'
import { unwrapConnectedComponent } from './connect'

class SomeComponent extends React.Component {
  someOtherComponent?: SomeOtherComponent

  private setSomeOtherComponent = (someOtherComponent: SomeOtherComponent) => {
    this.someOtherComponent = unwrapConnectedComponent(someOtherComponent)
  }

  onClick = () => {
    if (this.someOtherComponent) {
      this.someOtherComponent.log()
    }
  }

  render() {
    return (
      <div>
        <button onClick={this.onClick} />
        <ConnectedSomeOtherComponent ref={this.setSomeOtherComponent} />
      </div>
    )
  }
}

export default SomeComponent

元素的正确接口是什么＆＃34; GetWrappedInstance＆＃34;

2 个答案: