在打字稿中反应高阶组件（HOC）答案

【问题标题】：React Higher Order Component (HOC) in typescript在打字稿中反应高阶组件（HOC）
【发布时间】：2017-09-02 22:36:26
【问题描述】：

我正在尝试用 typescript 编写 React HOC，但我没有得到正确的定义。我不确定我想要实现的目标是否可行。

这是我的代码

import * as React from 'react'

export default function Ajax<Props, State>(InnerComponent: typeof React.Component): React.ComponentClass<Props & State> {
  return class extends InnerComponent<Props & State,any> {
    constructor() {
      super()
      this.state = {
        request: 'initial'
      }
    }
    changeRequest(newRequest) {
      this.setState({request: 'loading'})
    }
    render() {
      return <InnerComponent 
        {...this.props } 
        {...this.state}
        changeRequest={this.changeRequest} 
      />
    }
  }
}

如果我只是将道具和状态传递给孩子，它会起作用。但是如何编写定义以便能够将其他道具传递给包装的组件？在这种情况下，changeRequest 属性。

谢谢

【问题讨论】：

不知道哪里出了问题。被包装的组件需要知道所有的属性，你不应该在 HOC 中扩展它的属性定义。

标签： reactjs typescript higher-order-components

【解决方案1】：

我相信您只需要将 HOC 的上下文绑定到 changeRequest 函数即可。

constructor() {
  ...
  this.changeRequest = this.changeRequest.bind(this)
}

并确保您正在处理 InnerComponent 中的道具。例如。
<InnerComponent onClick={this.props.changeRequest}>

【讨论】：

嗨，保罗，感谢您的回复。这与绑定上下文无关。您需要绑定才能使点击生效。但我的问题在于打字。

【解决方案2】：

我能够让它工作。但我不确定这是正确的方法。但是现在编译器没有抱怨并且代码有效。为了让编译器停止抱怨，我不得不将道具添加为 javascript 对象。

这是我的工作代码：

import * as React from 'react'

export default function Ajax<Props, State> (InnerComponent: typeof React.Component): React.ComponentClass<Props & State> {
  return class extends InnerComponent<Props & State, any> {
    constructor() {
      super()
      this.state = {
        request: 'initial'
      }
      this.changeRequest = this.changeRequest.bind(this)
    }
    changeRequest(newRequest) {
      this.setState({request: 'loading'})
    }
    render() {
      return <InnerComponent {...this.props} {...this.state} {...{onCLick: this.changeRequest}}/>
    }
  }
}

【讨论】：