React：高阶组件|ref转发-Toy模板网

这篇具有很好参考价值的文章主要介绍了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，从而去调用子组件中暴露出来的方法。

import { forwardRef } from 'react';

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

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

//这里是父组件
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来调用，文章来源地址https://www.toymoban.com/news/detail-833815.html

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

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} />;
});

父组件

//这里是父组件
export default ()=>{
    const myInputRef = useRef();
    
    //调用方式:
    //myInputRef.current.doXXX();
    const clickHandler = ()=>{
       myInputRef.current.doSomething(/*params*/); 
    }
    
    return (<>
        <MyInput ref={myInputRef}/>
        <button onClick={clickHandler}>click here</button>
    </>);
}

到了这里，关于React：高阶组件|ref转发的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！