reactjs - 在 typescript 中 react 高阶组件(HOC)

Question

我正在尝试用 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} 
      />
    }
  }
}

如果我只是将 Prop 和状态传递给 child ，它就可以工作。但是我如何编写定义才能将额外的 Prop 传递给包装的组件？在这种情况下，changeRequest Prop 。

谢谢

Answer 1

我能够让它发挥作用。但我不确定这是正确的方法。但是现在编译器没有提示，代码可以工作了。为了让编译器停止提示，我不得不将 Prop 添加为 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}}/>
    }
  }
}