ReactJS - 转发 Refs

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

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

forwardRef 方法的签名

forwardRef 的签名如下 −

const new-component = React.forwardRef(fn)

其中 fn 的签名如下 −

(props, ref) => {
    // 通过附加 ref 来渲染一个 React 组件并返回它
}

使用 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 并将其传递给底层输入元素。
myRef 被分配给 MyInput 组件。
MyInput 组件将 myRef 传递给底层输入元素。
最后，myRef 指向输入元素。

在组件中应用 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 props 设置 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;

这里，