react中的useImperativeHandle()和forwardRef()用法_React_

一、useImperativeHandle（）

useImperativeHandle(ref, createHandle, [deps])

useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref

这样的命令式代码。 useImperativeHandle 应当与 forwardRef 一起使用。

function FancyInput(props, ref) {   const inputRef = useRef();   useImperativeHandle(ref, () => ({     focus: () => {       inputRef.current.focus();     }   }));   return ; } FancyInput = forwardRef(FancyInput);

在本例中，渲染 的父组件可以调用 inputRef.current.focus()。

二、forwardRef（）

React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。

这种技术并不常见，但在以下两种场景中特别有用：

（1）转发 refs 到 DOM 组件

（2）在高阶组件中转发 refs

React.forwardRef 接受渲染函数作为参数。React 将使用 props 和 ref 作为参数来调用此函数。此函数应返回 React 节点。 FancyButton 使用 React.forwardRef 来获取传递给它的 ref，然后转发到它渲染的 DOM button。这样，使用 FancyButton 的组件可以获取底层 DOM 节点 button 的 ref，并在必要时访问，就像其直接使用 DOM button 一样。

const FancyButton = React.forwardRef((props, ref) => (   // Step:3       // Step:4       {props.children}    )); const ref = React.createRef(); // Step:1 Click me!; // Step:2

在上述的示例中，React 会将 元素的 ref 作为第二个参数传递给 React.forwardRef 函数中的渲染函数。该渲染函数会将 ref 传递给 元素。 因此，当React 附加了 ref 属性之后，ref.current 将直接指向 DOM 元素实例。 欲了解更多相关信息，请参阅官档 refs 转发。

以下是对上述示例发生情况的逐步解释：（转发 refs 到 DOM 组件）

• 我们通过调用 React.createRef 创建了一个 React ref 并将其赋值给 ref 变量。
• 我们通过指定 ref 为JSX 属性，将其向下传递给 。
• React 传递 ref 给 forwardRef 内函数 (props, ref) => ...，作为其第二个参数。
• 我们向下转发该 ref 参数到

，将其指定为 JSX 属性。

当 ref 挂载完成，ref.current 将指向

DOM 节点。

三、案例

父组件

1、注册

2、定义

3、触发

子组件

1、暴露子组件方法，将 forwardRef 接受的 ref 属性转发到其组件树下的另一个组件中

(1)

(2)

(3)父组件

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章:

• vue3 reactive函数用法实战教程
• react-dnd API拖拽工具详细用法示例
• Vue3响应式对象Reactive和Ref的用法解读
• 关于react中useCallback的用法
• React-Router6版本的更新引起的路由用法变化
• React中refs的一些常见用法汇总
• React错误的习惯用法分析详解

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

上一篇：react中使用antd及immutable示例详解_React_

下一篇：react redux及redux持久化示例详解_React_