將香草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因為它位於同一文件夾中。