使用useRef钩子在React中更改元素的样式

在本文中，我们将学习如何使用useRef钩子来更改元素的样式。

useRef()允许我们创建对DOM元素的引用，并追踪变量而不引起重新渲染。

useRef在开发中非常重要，其中之一是直接访问DOM。useRef钩子使我们能够处理DOM操作。我们可以通过给元素添加ref属性来直接访问DOM元素。通过访问DOM，我们甚至可以操作元素的样式。我们可以使用style属性在DOM元素上设置样式。

语法：

const refContainer = useRef(initialValue);

在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应用程序：

npx create-react-app gfg-card

步骤2： 创建完gfg-card应用程序后，使用以下命令切换到新建的gfg-card文件夹：

cd gfg-card

步骤3： 我们将修改文件夹，并保留此项目所需的文件。确保您的文件结构如下所示。

项目结构： 它将如下所示。

使用useRef钩子在React中更改元素的样式

步骤5： 将代码添加到您的index.html文件中。将以下代码包含在位于项目目录公共文件夹中的index.html文件中。

文件名：index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1" /> 
    <meta name="theme-color" content="#000000" /> 
    <meta name="description" content= 
        "Web site created using create-react-app" /> 
    <title>Styling an element using the useRef hook</title> 
</head> 
  
<body> 
    <div id="root"></div> 
</body> 
  
</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

//importing useRef 
import { useRef } from 'react'; 
  
const App = () => { 
  
    //creating a ref 
    const ref = useRef(); 
    // Styling the element 
    const handleClick = () => { 
        ref.current.style.backgroundColor = 'black'; 
        ref.current.style.padding = '3rem'; 
        ref.current.style.color = 'white'; 
        ref.current.style.width = '150px'; 
        ref.current.style.height = '150px'; 
        ref.current.style.margin = '50px'; 
        ref.current.style.borderRadius = '10px'; 
    }; 
  
    return ( 
        <div> 
            <h2>Welcome to geeksforgeeks</h2> 
            <button onClick={handleClick}> 
                Enable dark mode 
            </button> 
  
            <br /> 
            <br /> 
  
            {/* Passing the ref to the DOM element ,  
                we wish to style */} 
            <div ref={ref}>Article on styling an element 
                using useRef hook in React</div> 
        </div> 
    ); 
}; 
  
export default App;

步骤7： 您的index.js文件应该长这样。index.js文件作为主入口点，在其内部将App.js文件呈现在DOM的根ID处。

文件名：index.js

import React from 'react'; 
import ReactDOM from 'react-dom/client'; 
import './index.css'; 
import App from './App'; 
  
const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render( 
    <React.StrictMode> 
        <App /> 
    </React.StrictMode> 
);

运行应用程序的步骤： 使用以下命令运行应用程序：