在 React 中，我们经常需要获取到某个元素的引用，以便进行一些操作，例如修改元素样式、添加事件监听等等。在 React 中，我们可以使用 ref 属性来获取元素的引用。本文将详细介绍 React 中如何获取元素的 ref 引用，并提供示例代码和指导意义。
什么是 ref？
在 React 中，ref 是一个特殊的属性，用于获取元素的引用。当我们在 JSX 中使用 ref 属性时，React 会自动将该属性的值设置为对应元素的引用。我们可以通过 ref.current 属性来访问该元素。
如何获取元素的 ref 引用？
在 React 中，我们可以通过以下方式来获取元素的 ref 引用：
1. 使用 createRef 方法
使用 createRef 方法可以创建一个 ref 对象，然后将其传递给需要引用的元素。例如，我们可以使用以下代码来获取一个 input 元素的引用：
------ ------ - --------- - ---- --------
----- ----------- ------- --------------- -
------------------ -
-------------
------------- - ------------
-
------------------- -
----------------------------------- -- -- ----- -----
-
-------- -
------ ------ ----------- ------------------- ---
-
-在上面的代码中，我们使用 createRef 方法创建了一个 inputRef 对象，并将其传递给了 input 元素的 ref 属性。当组件挂载后，我们可以通过 this.inputRef.current 属性来访问该元素。
2. 使用回调函数
除了使用 createRef 方法之外，我们还可以使用回调函数的方式来获取元素的 ref 引用。例如，我们可以使用以下代码来获取一个 div 元素的引用：
------ ----- ---- --------
----- ----------- ------- --------------- -
------------------ -
-------------
----------- - -----
-------------- - ------- -- -
----------- - --------
--
-
------------------- -
------------------------- -- -- --- -----
-
-------- -
------ ---- --------------------------- -------------
-
-在上面的代码中，我们定义了一个 divRef 变量，并将其初始化为 null。然后，我们定义了一个 setDivRef 回调函数，用于接收 div 元素的引用并将其赋值给 divRef 变量。最后，我们将 setDivRef 函数作为 div 元素的 ref 属性传递给了 div 元素。当组件挂载后，我们可以通过 this.divRef 变量来访问该元素。
总结
本文介绍了在 React 中如何获取元素的 ref 引用，包括使用 createRef 方法和回调函数的方式。在实际开发中，我们经常需要获取元素的引用，以便进行一些操作，例如修改元素样式、添加事件监听等等。通过本文的介绍，相信读者已经掌握了获取元素 ref 引用的方法，并能够在实际开发中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65faacdcd10417a22268026a