使用useRef钩子在React中更改元素的样式
在本文中,我们将学习如何使用useRef钩子来更改元素的样式。
useRef()允许我们创建对DOM元素的引用,并追踪变量而不引起重新渲染。
useRef在开发中非常重要,其中之一是直接访问DOM。useRef钩子使我们能够处理DOM操作。我们可以通过给元素添加ref属性来直接访问DOM元素。通过访问DOM,我们甚至可以操作元素的样式。我们可以使用style属性在DOM元素上设置样式。
语法:
在React中使用ref来改变元素的样式:
- 我们将导入useRef hook以访问我们希望样式化的DOM元素。
- 然后,声明一个ref并将其传递给DOM元素作为ref属性。
- useRef返回一个带有一个属性(即current)的引用对象。
- React将对DOM元素的引用放入ref的current中,我们可以通过事件处理程序访问它。
- 我们将通过ref上的current属性访问元素。
- 最后,我们将通过ref.current.style更新元素的样式。
让我们通过以下示例来理解这个概念。
方法: 我们将创建一个带有一些文本的div元素。然后,我们将使用useRef hook来更改此div的样式。我们将创建一个按钮,将启用暗黑模式,即将div的背景更改为黑色。以下是逐步实现的步骤。
步骤1: 创建一个项目目录,打开终端,并使用以下命令创建一个名为“gfg-card”的React应用程序:
步骤2: 创建完gfg-card应用程序后,使用以下命令切换到新建的gfg-card文件夹:
步骤3: 我们将修改文件夹,并保留此项目所需的文件。确保您的文件结构如下所示。
项目结构: 它将如下所示。
步骤5: 将代码添加到您的index.html文件中。将以下代码包含在位于项目目录公共文件夹中的index.html文件中。
文件名:index.html
步骤6: 现在通过使用useRef hook来更改div元素的样式。在App组件中,创建一个div元素和一个按钮来启用div的深色模式。我们将为按钮添加一个事件处理程序。当点击按钮时,handleClick函数将被触发,显示div内部文本在黑色卡片中。
- 为了访问div元素,我们将引入useRef Hook。
- 然后,创建一个ref并将其作为ref属性传递给DOM元素div。
- useRef返回一个具有属性current的对象。为了访问我们在ref对象上设置的ref属性的div元素,我们需要访问ref对象的current属性。
- 当我们将ref属性传递给一个元素,例如
,React会将ref对象的.current属性设置为对应的DOM节点。
* 通过访问元素的style属性,我们可以获取包含元素样式的对象。
* React会将对DOM元素的引用放入ref.current,我们可以通过事件处理程序handleClick来访问它。
* 我们将通过ref.current.style.backgroundColor=’black’来更改div的样式,接下来是其他样式。
文件名:App.js
步骤7: 您的index.js文件应该长这样。index.js文件作为主入口点,在其内部将App.js文件呈现在DOM的根ID处。
文件名:index.js
运行应用程序的步骤: 使用以下命令运行应用程序:
输出: 默认情况下,React 项目将在端口3000上运行。您可以在浏览器上通过localhost:3000访问它。通过点击按钮,我们可以看到如何使用useRef钩子改变了div的样式。