react修饰器对组件实例ref引用实例的影响
程序员文章站
2022-03-26 22:28:11
ref: 获取组件实例的引用,即获取实例的this。 影响原因 当一个组件用了修饰器之后,其ref会被包裹一层,而不能找到真实的this实例。 ref在react组件中,同为关键字,子组件取不到该props 解决方法 在组件外层包裹一层 container,手动绑定ref 指定getInstance ......
ref: 获取组件实例的引用,即获取实例的this。
影响原因
- 当一个组件用了修饰器之后,其ref会被包裹一层,而不能找到真实的this实例。
- ref在react组件中,同为关键字,子组件取不到该props
解决方法
- 在组件外层包裹一层 container,手动绑定ref 指定getinstance方法为获取其ref方法
function withref(wrap) { return class extends component { constructor(props) { super(props); } getrefs = o => { const { getinstance } = this.props; if (getinstance) { getinstance(o) } } test2 = () => 222 render() { return <wrap {...this.props} ref={this.getrefs} /> } } }
- 针对 react-redux 的 connect 高阶组件
- v6.0 版本以下可用上述第一个方法对其包裹
- v6.0 以上(包括6.0)可添加 forwardref 参数˛
react-redux 官方文档
上一篇: TypeScript Jest 调试
下一篇: 你小子又把我老婆惹哭了