Question

使用重构是否可以调用增强组件的绑定方法？例如，关于“SomeOtherComponent”

的下面示例的onClick

class BaseComponent extends Component {
  constructor (props) {
    super(props)
    this.myBoundMethod = this._myBoundMethod.bind(this)
  }
  _myBoundMethod () {
    return this.something
  }
  render () {
    return (<h1>{'Example'}</h1>)
  }
}

const Enhaced = compose(
  /* Any number of HOCs ...  
    lifecycle,
    withProps,
    withStateHandlers
  */
)(BaseComponent)

class SomeOtherComponent extends Component {
  constructor (props) {
    super(props)
    this.handleClick = this._handleClick.bind(this)
  }
  _handleClick () {
    console.log(this._enhacedComponent.myBoundMethod())
  }
  render () {
    <div>
      <Enhaced ref={(c) => {this._enhacedComponent = c}} />
      <button onClick={this.handleClick}>Click</Button>
    </div>
  }
}

我知道hoistStatics但我不知道如何为绑定方法制作它。

Answer 1

hoistStatics仅提升静态属性，但您需要的是实例方法。

这是一种在重构中实现所需目标的方法。首先，将ref回调重命名为，例如forwardedRef：

<Enhaced fowardedRef={(c) => { this._enhacedComponent = c }} />

然后，使用withProps作为最后一个HOC，将fowardedRef重命名为ref：

const Enhaced = compose(
  /* ... other HOCs ... */
  withProps(({ fowardedRef }) => ({ ref: fowardedRef  }))
)(BaseComponent)

现在，ref回调传递给BaseComponent。

整个运行示例在https://codesandbox.io/s/6y0513xpxk

React Recompose调用enhaced组件的绑定方法

1 个答案: