本教程解释了一个错误，必须在派生类中调用超级构造函数，然后才能在react中访问它。
首先，让我们创建一个react组件
import React from "react";
class CssStyles extends React.Component {
constructor() {
}
render() {
return
}
}
export default CssStyles;
并在另一个反应组件中调用上述类
import React from 'react';
import CssStyles from './css-styles';
function App() {
return (
);
}
export default App;
它为反应组件抛出了一个错误，即未捕获的引用错误。在访问 "this "或从派生构造函数返回之前，必须调用派生类中的超级构造函数。
修复在访问'this'或从派生构造函数返回之前调用派生类中的超级构造函数的问题
我们用 ES6 语法创建了一个类。
React创建了这个反应类的一个实例
解决方案和修复方法
- React组件扩展了React.Component。组件是一个基类，派生类是一个扩展类。在派生类中，如果它有一个构造函数，构造函数的第一行是调用super()，然后再在组件中调用这个关键字。
如果在构造函数中没有定义构造函数，这个错误就不会出现，它会调用超类的默认构造函数。
例如，让我们试着理解继承类在ES6中是如何工作的。
用类型属性定义基类Animal。
class Animal{
constructor(){
this.type = 'animal';
}
}
通过继承（Extend）动物类来定义子类或派生类Lion 在构造函数中:
- 你在super()之前调用了this.type。这是不正确的，也是无效的。有效的是，子类构造器没有使用这个关键字，并且在声明
super()，意味着如果你已经定义了构造器，super()必须是ES派生类构造器的第一行。 this在super()语句之后调用，如下图所示
class Lion extends Animal{
constructor(){
console.log(this.type); // gives an error ReferenceError
super();
console.log(this.type);// This works and print Animal
}
}
通过扩展Lion类创建了一个新的类，没有定义构造函数，没有错误且有效。
class MasaiLion extends Lion{}
var lion = new Lion; // Animal
var masaiLion = new MasaiLion; // Animal
希望你能理解ES6类的继承性和超级语句的用法。
我们必须以同样的方式在React类组件中实现，因为这些都是遵循ES2015标准。
总结
综上所述，ES6类组件在创建React组件时必须遵循以下准则:
- 派生类构造函数，在调用super()之前，调用
this，会出现ReferenceError。 - 派生类构造函数必须包含调用超类构造函数的第一行，该构造函数初始化了超类中的数据。
- 如果没有构造函数，这些规则就不适用，并且可以按预期工作。
