ReactJS - 转发引用

Ref 是一个逃生舱口，用于直接操作 DOM，而不会影响状态更改更新组件。Ref 可以应用于 DOM 元素，但要将 Ref 应用于 React 组件并将 DOM 元素深入组件内部，可以选择 Forwarding Ref。转发 Ref 让组件从顶级组件接收 ref，并将其进一步向下传递到下一级组件，以获取 DOM 元素。

在本章中，让我们学习如何使用 Forwarding 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，并将其传递给底层输入元素。
• myRef 被分配给 MyInput 组件。
• MyInput 组件将 myRef 传递给底层输入元素。
• 最后，myRef 指向输入元素。

在组件中应用 forwardRef

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

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

接下来，打开 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 元素使用 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;

这里

• myRef 是使用 createRef 方法创建的，并将其传递给 SimpleForwardRef 组件。
• myRef 表示由 SimpleForwardRef 组件呈现的输入元素。
• useEffect 将通过 myRef 访问输入元素，并尝试将 input 的值从 hi 更改为 Hello。

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

总结

Forward ref 增强了 ref 概念，可以在 react 应用程序中的任何地方使用。任何 DOM 元素，可能是组件层次结构中的任何级别，都可以使用转发 ref 概念来访问和操作。