React Ref 和 React forwardRef
Posted dejunwang
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Ref 和 React forwardRef相关的知识,希望对你有一定的参考价值。
-
Ref 和Dom,Ref是reference(引用)的简写。
- 能力:大多数情况下,props前递可以解决一切问题,但是依然有需要触达React实例或者Dom节点的情况,这时候应该使用React Ref。
- 使用:
- 用来处理立即执行的动画。
- 用来处理非受控组件的焦点,什么是受控/非受控组件参考文章。
- 用来与第三方库对接,我知道的有d3 或者 cocos。
-
React.forwardRef((props,ref)=><Compnent>)
- 简而言之就是自动透传引用(Ref),能让组件接收传过来的ref, 向下(或者说向前)传递Ref。
const FancyButton = React.forwardRef((props, ref) => ( <button ref={ref} className="FancyButton"> {props.children} </button> )); // You can now get a ref directly to the DOM button: const ref = React.createRef(); <FancyButton ref={ref}>Click me!</FancyButton>;
-
上述代码的解释:
- 首先创建了一个ref, 这个ref的目的就是抓到孙子组件中的input节点
- 通过组件属性把ref传给子组件<FancyButton>
- 子组件通过React.forwardRef透传props和ref,这里ref才是我们要注意的点。
- 参数ref赋值给孙子组件<button>
- 这个ref就能抓到孙子组件的实例。
- 简而言之就是自动透传引用(Ref),能让组件接收传过来的ref, 向下(或者说向前)传递Ref。
-
React.forwardRef((props, ref)=><Componnet>)在高阶组件中的使用:
- 比如我们写一个打印前后属性的高阶组件logProps,这个高阶组件能够透传ref
1 function logProps(Component) { 2 class LogProps extends React.Component { 3 componentDidUpdate(prevProps) { 4 console.log(‘old props:‘, prevProps); 5 console.log(‘new props:‘, this.props); 6 } 7 8 render() { 9 const {forwardedRef, ...rest} = this.props; 11 // 把常规属性"forwardedRef"作为ref赋值给传过来的Component组件 12 return <Component ref={forwardedRef} {...rest} />; 13 } 14 } 15 16 // 注意React.forwardRef提供的第二个参数ref. 17 // 我们可以把ref作为一个常规属性"forwardedRef"传给LogProps这个组件 18 // 就可以跟实例绑定. 19 return React.forwardRef((props, ref) => { 20 return <LogProps {...props} forwardedRef={ref} />; 21 }); 22 }
- 比如我们写一个打印前后属性的高阶组件logProps,这个高阶组件能够透传ref
以上是关于React Ref 和 React forwardRef的主要内容,如果未能解决你的问题,请参考以下文章
React hook 中connect和forwardRef连用会导致传入子组件的ref失效
React 和 ApolloClient:网络错误:forward(...).subscribe 不是函数
React-router匹配params和forward按钮