如何在 React 中使用 ForwardRef

React js 中的 forwardRef 函数允许父组件将“ref”（引用）“转发”（向下移动）到其子组件。当子组件使用 ForwardRef 函数被 React 组件的父组件引用时，将生成一个 DOM 实体。子组件可以使用脚本自动读取和修改元素。

语法

以下语法显示了 React js 与 forwardRef 函数。

• 它接受一个函数，该函数在 props 中带有 ref 参数作为参数。
• 返回值：一个 JSX 元素是此函数的结果。

React 应用程序开发

以下步骤用于开发 react 应用程序。

步骤 1

使用该命令创建 React.Js 开发环境

步骤 2

以下命令用于移动您的项目文件夹。它在创建了一个名为 folder_name 的文件夹后起作用。

如何实现 ForwardRef？

在 React 中，父组件使用 props 将数据提供给其子组件。考虑创建一个具有附加配件的子组件来更改操作。

• 我们需要在不使用 state 或重新绘制组件的情况下修改子组件的行为。
• 我们可以使用 refs 实现子组件的行为。元素代表 DOM 节点。可以使用节点的引用来访问它。
• 我们可以在不影响其当前状态或重新渲染它的情况下更改它。
• 父组件必须为子组件提供一种获取 ref 的方法。子组件必须连接到其父节点的当前节点。 Ref 转发是 react.js 实现过程的方法名称。

示例

以下示例显示了 React.Js 的 forwardRef。

示例 1

以下示例用于获取 forward 的工作过程。带有 focus 按钮的输入标签显示在网页上。如果我们单击该按钮，focus 函数将适用于输入字段。

输出

表单元素及其操作显示为输出。

示例 2

如果我们在没有数据的情况下单击该按钮，则该功能不适用于 forwardRef。

输出

表单元素及其操作显示为输出。

ForwardRef 有多重要？

以下列表显示了 forwardRef 在 React JS 中的重要性。

• forwardRef 对于在 React 中实现更具适应性和有效性的组件组合非常重要。
• 对于复杂应用程序，会有多次操作。父组件需要直接访问子组件的 DOM 元素或实例。
• 由于 React 的默认行为，这种多重功能得以实现。当使用高阶组件或包装器组件 (HOC) 时，这是可能的。
• 我们可以使用 forwardRef 将标识符从父组件发送到子组件。它在子组件包含在另一个组件中后起作用。
• 它提供父组件和子组件的 DOM 元素或对象之间的直接通信。

示例

以下代码显示了 forwardRef 在 React JS 中的默认用法。当我们单击该按钮时，计数器计数并增加 1。

输出

带有按钮的计数器显示为输出。

说明

• 按钮元素上的 ref 属性的值在 ref 参数中设置，例如 Counter 组件。
• App 组件呈现 Counter 组件。
• 首先，创建 ref。
• Counter 组件的 ref 属性被赋予值 aRef。
• Counter 组件中按钮的 HTMLButtonElement 存储在 aRef 中。
• Ref 按钮的点击将确认功能计数以及 Ref 和用作按钮的 HTML 按钮元素对象。
• Counter 组件被传输到子组件，并且每次点击按钮都会增加。

在 React 中使用 ForwardRef 转发 refs

当子组件需要引用其父组件的当前节点时，父组件需要将 ref 传输给子组件。 引用是 forwardRef 的方法术语。

ref 通过组件自动传递给其子组件，使用 ref 转发方法。 创建可重用组件库时，此方法最为必需。 它有助于将 ref 传递给子组件并使用 forwardRef 函数。

组件使用 FancyButton 获取对底层按钮 DOM 节点的引用，并根据需要使用它。

以下是上述示例中发生的事情的逐步分解

• 通过调用 React，我们生成一个 React ref。将 ref 变量设为 createRef 的接收者。
• 我们将 ref 声明为 JSX 属性，并将其作为 ref 传递给 fancy 按钮。
• React 将 ref 作为第二个参数传递给 forwardRef 中的“（props，ref）”方法。
• 通过将此 ref 参数指定为 JSX 属性，我们将其传递给 <button ref={ref}>
• 当 ref 被附加时，ref.current 将注意力吸引到 DOM 节点，就像一个“按钮”。

示例

给定的示例适用于按钮单击和输入数据。当您单击给定的按钮时，警报框中会显示一条警报消息。

输出

带有按钮的计数器显示为输出。

在 React 中不正确地使用引用

ref 的功能使开发人员能够与 DOM 元素和组件进行直接交互。在某些情况下，可能存在比使用引用更好的操作。仅举几例

• 滥用 DOM 操作

React 提倡一种声明式方法进行 UI 开发。避免使用引用进行直接 DOM 操作至关重要。大多数 UI 修改都可以使用组件状态和 props 处理。

• 无状态组件过度使用 refs

功能部分通常设计为变得简单且无状态。考虑将功能组件拆分成更小的组件。您经常使用多个引用或将状态管理转移到更高级别的组件。无状态组件被多次使用。

• 数据流引用

Refs 必须避免用于代替 prop 传递或状态管理。使用 Redux 或 React 的 Context API 等状态管理工具，但组件 props 应该是数据流的主要通道。

• 用引用替换受控组件

只要有可能，在表单元素中使用受控组件（通过设置值并使用状态和事件处理程序管理输入更改）。当需要轻松访问 DOM 元素时，引用仅应用于非受控组件。

• 访问子组件的内部状态

不建议使用引用来访问子组件的内部状态或方法。相反，使用回调或其他状态管理方法在父组件和子组件之间建立连接。

结论

Refs 是 React 中一种有效的工具，它允许即时访问 DOM 节点，从而为创建更简洁、功能更丰富、性能更高的组件开辟了许多方法和可能性。