在组件的构造函数中使用 super() 方法

super() 在构造函数中用于访问构造函数中的this关键字。有了这个，让我们首先尝试理解 super() 。

super 是 JavaScript 中的关键字，用于调用层次结构中的 super 或父类。 React 类使用 ES6 语法扩展了 React 组件。如果我们想在构造函数中设置一个属性或访问它，我们需要调用 super() 方法。

创建反应应用程序：

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

npx create-react-app filename

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

cd filename

项目结构：它看起来像这样：

文件夹结构

示例 1：本示例将说明 super() 在组件的构造函数中的使用：

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
  
ReactDOM.render(
    
        
    ,
    document.getElementById('root')
);
  
// If you want to start measuring performance in 
// your app, pass a function
  
// To log results 
// (for example: reportWebVitals(console.log))

App.js

import React from 'react'
  
class MyComponent extends React.Component {
    constructor() {
        // Undefined
        console.log(this) 
    }
    render() {
        // Defined
        return Super Concept; 
    }
}
  
export default MyComponent;

App.js

import React from 'react'
  
class MyComponent extends React.Component {
constructor() {
    super()
    console.log(this) 
}
  
render() {
    return Super Concept; // Defined
}
}
  
export default MyComponent;

应用程序.js

import React from 'react'
  
class MyComponent extends React.Component {
    constructor() {
        // Undefined
        console.log(this) 
    }
    render() {
        // Defined
        return Super Concept; 
    }
}
  
export default MyComponent;

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

npm start

输出：

运行上面的代码时，我们会得到一个错误，即在 super() 之前不允许这样做。现在打开您的浏览器并转到 http://localhost:3000/，您将看到以下输出：

为了解决这个错误，我们在构造函数中使用了 super()。因此，每当我们想在构造函数中访问 this 时，我们都需要在构造函数中使用 super() 。

关键字“this”： JavaScript this 关键字指的是它所属的对象。

示例 2：此示例通过解决我们在构造函数中使用 super() 的错误来说明代码。

应用程序.js

import React from 'react'
  
class MyComponent extends React.Component {
constructor() {
    super()
    console.log(this) 
}
  
render() {
    return Super Concept; // Defined
}
}
  
export default MyComponent;

输出：

现在，我们可以在构造函数中访问this并使用它来访问已传递给组件的 props。