如何在组件安装到反应之前更改正文类？

我们可以在组件安装到 ReactJS 之前使用以下方法更改 body 类：

先决条件： React 组件生命周期

React 组件的生命周期如下：

1. 初始化
2. 安装
3. 更新
4. 卸载

示例：在初始化阶段安装之前更改主体类。执行顺序：

Javascript

import React,{ Component }  from 'react';
   
class App extends Component {
  
  // Gets called 1st place
  constructor(props) {
    super(props);
  }
  
  // Gets called at 2nd place
  render() {
    return (
        
GeeksforGeeks
    );
  }
  
  // Gets called at 3rd place
  componentDidMount(){
     // Code
  }
}
  
export default App;

解释：在初始化阶段，首先被调用的是组件的构造函数。我们将使用构造函数进行更改。我们可以使用以下代码在构造函数中获取 body 元素的引用：

let bodyElement = document.getElementsByTagName('body')[0];

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

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

项目结构

文件名-App.css：

css

* {
  margin: 30px;
}
  
h1 {
  color: white;
  text-shadow: 1px 1px black;
}
  
.active {
  background-color: green;
}

文件名-App.js：

Javascript

import React, { Component } from 'react';
import "./App.css"
  
class App extends Component {
  
  constructor(props) {
  
    // This will call the constructor of the parent
    super(props);
  
    // Taking reference of body element
    let bodyElement = document.getElementsByTagName('body')[0];
  
    // Changing the class of body Before mounting
    bodyElement.className = "active";
  }
  
  componentDidMount() {
  }
  
  render() {
    return (
      
Geeks For Geeks
    );
  }
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

• 安装组件之前：

• 组件安装后：