1

使用 recompose 是否可以调用增强组件的绑定方法？例如 onClick 在下面的“SomeOtherComponent”示例上

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

我知道提升静态，但我不知道如何将它用于绑定方法。

4

1 回答 1

1

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

这是一种在 Recompose 中实现所需内容的方法。首先，将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

于 2018-05-01T03:29:53.953 回答