doubleyong
管理员
管理员
  • 最后登录2022-01-18
  • 发帖数1052
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:149回复:0

[react]forwardRef 高级组件

楼主#
更多 发布于:2021-12-30 09:23
forwardRef是React中的一个高级组件 ,主要用于实现 ref转发 透传[/p][p]即,将父组件的ref对象,传到子组件中,这样子组件与父组件都可以控制ref对象;

代码如下:
父组件:
如下代码中,定义的ref对象childRef , 将通过ref 属性,传给子组件
export function HookUseIh(props){
  const childRef =useRef(null)  // 定义的ref对象
  const change =()=>{
    childRef.current.focus();
  }
  return (
    <div>
    {/* 通过ref 属性,传给子组件 */}
    <IHChild ref={childRef} /> 
    <button onclick={change}>父组件中focus</button></div>
  );
}


子组件 :
第二个参数inputRef ,即是父组件中传递过来的ref对象,子组件可直接使用
export React.forwardRef(IHChild(props,inputRef)=>
// inputRef即是父组件中传递过来的ref对象,子组件可直接使用
const onChange=()=>{
 inputRef.current.focus();
}
return (<div>
   子组件
  <input ref={inputRef} type="text"/>
  <button onclick={onChange}>change</button></div>
  )
}
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号