获取被connect的组件的方法

最新推荐文章于 2023-02-01 16:25:26 发布

原创最新推荐文章于 2023-02-01 16:25:26 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react #redux

react 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在React中通过设置withRef为true来访问被高阶组件包裹的子组件实例，并提供了一种更优雅的方法。

connect(mapStateToProps, mapDispatchToProsp, null, { withRef: true })

// child comp
class Child extends React.Component {
    focus() {
    this.refs.input.focus()

    }
    render () {
        return (
             <div><input type="text" ref="input" /></div>
        )
    }
}

// connect的options参数withRef必须设置为true
export default connect(mapStateToProps, mapDispatchToProsp, null, { withRef: true })(Child)

// parent child

class Parent extends React.Component {
    // 调用子组件的方法
    callChildMethod () {
        this.refs.child.getWrappedInstance().focus()
    }
    render () { ... }
}