ReactJS - 转发 Ref

Ref 是一种用于直接操作 DOM 的逃生舱，不受状态更改更新组件的影响。Ref 可以应用于 DOM 元素，但要将其应用于 React 组件并在组件内部获取 DOM 元素，转发 Ref 是最佳选择。转发 Ref 允许组件从顶级组件接收 ref 并将其进一步传递到下一级组件，以便获取 DOM 元素。

让我们在本节中学习如何在 React 中使用转发 Ref。

forwardRef 方法的签名

forwardRef 的签名如下：

const new-component = React.forwardRef(fn)

其中 fn 的签名如下：

(props, ref) => {
   // renders a react component by attaching the ref and returns it
}

使用 forwardRef 的一个简单示例如下：

const MyInput = React.forwardRef((props, ref) => (
   <input type="text" ref={ref} value={props.value} />
));

const myRef = React.createRef();
<MyInput ref={myRef} value="Hi" />

这里，

MyInput 从顶级组件获取 ref 并将其传递给底层的 input 元素。
myRef 被分配给 MyInput 组件。
MyInput 组件将 myRef 传递给底层的 input 元素。
最后，myRef 指向 input 元素。

在组件中应用 forwardRef

让我们通过开发一个应用程序来学习 forwardRef 的概念。

首先，创建一个新的 React 应用并使用以下命令启动它。

create-react-app myapp
cd myapp
npm start

接下来，打开 App.css (src/App.css) 并删除所有 CSS 类。然后，创建一个简单的组件，SimpleForwardRef (src/Components/SimpleForwardRef.js)，如下所示：

import React from "react";
const SimpleForwardRef = React.forwardRef((props, ref) => (
   <input type="text" ref={ref} value={props.value} />
));
export default SimpleForwardRef

这里我们有，

使用 forwardRef 将 ref 传递给 input 元素。
input 元素使用 ref 属性来设置 ref 值。

接下来，打开 App 组件 (src/App.js) 并使用 SimpleForwardRef 组件更新内容，如下所示：

import './App.css'
import React, { useEffect } from 'react';
import SimpleForwardRef from './Components/SimpleForwardRef'
function App() {
   const myRef = React.createRef();
   useEffect(() => {
      setTimeout(() => {
         myRef.current.value = "Hello"
      }, 5000)
   })
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <SimpleForwardRef ref={myRef} value="Hi" />
            </div>
         </div>
      </div>
   );
}
export default App;

这里，

myRef 使用 createRef 方法创建并传递给 SimpleForwardRef 组件。
myRef 代表由 SimpleForwardRef 组件渲染的 input 元素。
useEffect 将通过 myRef 访问 input 元素并尝试将 input 的值从 hi 更改为 Hello。

最后，在浏览器中打开应用程序。input 的值将在 5 秒后更改为 Hello，如下所示：

总结

转发 Ref 增强了 Ref 的概念，使其可以在 React 应用程序的任何地方使用。任何 DOM 元素（无论在组件层次结构中处于任何深度）都可以使用转发 Ref 概念进行访问和操作。

打印页面