Question

我曾经有过这样的组件：

class BlahDumb extends Component {
   toggleMe = () => console.log('toggling')
   render() {
      ...
   }
}

我会这样使用它：

class App extends Component {
    doIt = () => this.el.toggleMe()
    refEl = el => this.el = el;
    render() {
       return (
          <div>
              <BlahDumb ref={this.refEl} />
              <button onClick={this.doIt} />
          </div>
       )
    }
}

现在这很好用直到我将Blah连接到redux。

我把Blah改成了这个：

const Blah = connect(function() { ... })(BlahDumb);

现在我无法再通过参考号toggleMe访问this.el了。这是不好的模式吗？或者有没有办法让孩子参考？

Answer 1

将您的子组件传递选项参数连接到像

这样的连接

const Blah = connect(
    mapStateToProps,
    mapDispatchToProps,
    null,
    { withRef: true }
)(BlahDumb)

在您的父组件中使用getWrappedInstance()函数调用子方法，如。

this.el.getWrappedInstance().toggleMe()

访问redux连接组件的参考

1 个答案: