带有“GetWrappedInstance”的元素的正确接口是什么答案

【问题标题】：What is the proper interface for element with "GetWrappedInstance"带有“GetWrappedInstance”的元素的正确接口是什么
【发布时间】：2018-04-14 03:11:39
【问题描述】：

我正在用 typescript 编写 React+Redux。我需要访问一个包装实例的引用，例如this.refs.items.getWrappedInstance()，但遇到打字稿错误Property 'getWrappedInstance' does not exist on type 'ReactInstance'
我应该给items哪个接口？是否有任何 Redux 定义的接口可以声明或我需要创建自己的接口？
我尝试谷歌搜索stackoverflow，但找不到答案。

谢谢！

【问题讨论】：

github.com/DefinitelyTyped/DefinitelyTyped/issues/26871

标签： reactjs typescript

【解决方案1】：

我们在使用 Flow 时遇到了同样的错误，我们最资深的 UI 开发人员最终说要使用 // $FlowIgnore: some comment

我认为因为访问 WrappedInstance 是一种反模式流程，而 typescript 可能不支持它......但是？

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

【讨论】：

【解决方案2】：

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

记下connect 函数中的{ withRef: true }。

这是一个用于添加缺失定义的小型实用程序类型。

// 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

【讨论】：