React:高阶组件|ref转发

高阶组件

参考文档:高阶组件 -- React (reactjs.org)

高阶组件(Higher-Order Components,简称 HOC )是React中用于复用组件逻辑的一种高级技巧。具体而言:高阶组件是参数为组件,返回值为新组件的函数。

组件是将 props 转换为 UI,而高阶组件是将组件转换为另一个组件。

HOC 在 React 的第三方库中很常见,例如 Redux 的 connect 和 Relay 的 createFragmentContainer

此处不再搬运高阶组件具体如何使用的部分,详情参考React官网文档即可。

ref转发:forwardRef

forwardRef函数的作用,

forwardRef 允许组件使用 ref 将 DOM 节点暴露给父组件。

简单讲:就是让子级函数式组件除了props参数之外,额外拥有第二个参数ref;之后就可以在父组件中拿到这个ref,从而去调用子组件中暴露出来的方法。

TypeScript 复制代码
import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  // ...
});

然后在父组件中,可以定义ref属性,来拿到子组件的引用,伪代码示例如下,

TypeScript 复制代码
//这里是父组件
export default ()=>{
    const myInputRef = useRef();
    
    //调用方式:
    //myInputRef.current.doXXX();
    
    return (<MyInput ref={myInputRef}/>);
}

暴露句柄:useImperativeHandle

那么,通过forwardRef转发给子组件的ref所调用的具体方法/句柄如何定义呢?

useImperativeHandle 是 React 中的一个 Hook,它能让你自定义由 ref 暴露出来的句柄。

useImperativeHandle(ref, createHandle, dependencies?)

例如:以下代码就为MyInput组件提供了doSomething句柄,供父组件通过ref来调用,

TypeScript 复制代码
import { forwardRef, useImperativeHandle } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  useImperativeHandle(ref, () => {
    return {
         //向外暴露的句柄
        doSomething:() =>{
                console.log('here is children method!');
                return 'do-something'
      },
    };
  }, []);

  return <input {...props} />;
});

完整示例代码

子组件:MyInput

TypeScript 复制代码
import { forwardRef, useImperativeHandle } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  useImperativeHandle(ref, () => {
    return {
         //向外暴露的句柄
        doSomething:() =>{
                console.log('here is children method!');
                return 'do-something'
      },
    };
  }, []);

  return <input {...props} />;
});

父组件

TypeScript 复制代码
//这里是父组件
export default ()=>{
    const myInputRef = useRef();
    
    //调用方式:
    //myInputRef.current.doXXX();
    const clickHandler = ()=>{
       myInputRef.current.doSomething(/*params*/); 
    }
    
    return (<>
        <MyInput ref={myInputRef}/>
        <button onClick={clickHandler}>click here</button>
    </>);
}
相关推荐
当牛作馬4 分钟前
React——ant-design组件库使用问题记录
前端·react.js·前端框架
0wioiw017 分钟前
Flutter基础(前端教程⑨-图片)
前端·flutter
一只一只妖20 分钟前
uniapp小程序无感刷新token
前端·小程序·uni-app
小飞悟44 分钟前
那些年我们忽略的高频事件,正在拖垮你的页面
javascript·设计模式·面试
绅士玖1 小时前
📝 深入浅出 JavaScript 拷贝:从浅拷贝到深拷贝 🚀
前端
中微子1 小时前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang1 小时前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构
G等你下课1 小时前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在1 小时前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵1 小时前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript