将香草ES6扩展类导入React

Question

如何在不使用React.Component 情况下将React.Component ES6类和扩展类导入到ReactJS项目中？

App.js

import React from 'react';
import {Log} from './lib/Log';
import {CoolLog} from './lib/CoolLog';
import {HotLog} from './lib/HotLog';

class App extends React.Component {
    constructor() {
        ...
    }
    doLog() {
        var coolLog = new CoolLog();
        coolLog.log('Cool!');
        var hotLog = new HotLog();
        hotLog.log('Hot!');
    }
    render() {
        ...
    }
}

export default App;

lib / Log.js

export class Log {
    _log(data){
      console.log(data);
    }
}

lib / CoolLog.js

import {Log} from './lib/Log';

export class CoolLog extends Log {
    log(data){
      this._log('❄️'+data+'❄️');
    }
}

lib / HotLog.js

import {Log} from './lib/Log';

export class HotLog extends Log {
    log(data){
      this._log('🔥'+data+'🔥');
    }
}

Answer 1

要导入时，必须先将其导出：

export class Log {
    _log(data){
      console.log(data);
    }
}

Answer 2

您正在导入Log但使用_log 。 _log在任何地方都没有定义。 改用this._log 。 扩展某个类时，可以使用this来使用this父类的方法。

在这里，它运作完美。

export class CoolLog extends Log {
    log(data){
        this._log('❄️'+data+'❄️');
    }
}

在此处了解更多有关扩展的信息 。

Answer 3

我的样本没有说明问题所在的类文件（存储在lib目录中）的结构。

lib/CoolLog.js和lib/HotLog.js应该导入./Log.js而不是lib/Log.js因为它位于同一文件夹中。