导入和导出 es6 类

Question

我想创建 ES6 class 从文件中读取数据并简单地 returns 文件的内容，所以我创建了一个名为 FileReader 的 class有一个构造函数 filePath 和一个名为 getFileContent

的方法

import fs from 'fs';
import path from 'path';

export class FileReader {

constructor(filePath) {
    this.filePath = filePath;
    fs.readFile(filePath, (err, data) => {
        if (err) {
            console.log(err);
        }

        this.fileContent = data;
    });
}

getFileContent(separator, columns) {
    console.log(this.fileContent);
}

}

我有一个名为 OrderList 的 React 组件我想在 componentDidMount 方法中使用 FileReader 来读取文件的内容

import React from 'react';
import {FileReader} from '../Utils/FileReader';

class OrdersList extends React.Component {

    constructor(props, context) {
        super(props, context);
    }

    componentDidMount() {
        FileReader reader = new FileReader('');
        reader.getFileContent(',' , []);
    }


    render() {

    }
}


export default OrdersList;

我收到错误的问题 Unexpected token reader 那么这种方法有什么问题？

Answer 1

将此行：FileReader reader = new FileReader(''); 更改为 const reader = new FileReader('');

Answer 2

你的代码有两个问题：

你在构造函数中读取文件内容，在大多数情况下，fileContent 将是未定义的，因为 fs.readFile 是异步函数。
您正在创建一个没有文件路径的 reader：FileReader reader = new FileReader('');

要解决所描述的问题，您应该将读取文件的逻辑移动到 class 函数中并使用回调或承诺：

class OrdersList extends React.Component {
  constructor(filePath) {
    this.filePath = filePath;
 }

 getFileContent(separator, columns, cb) {
   fs.readFile(this.filePath, (err, data) => {
      if (err) {
        console.log(err);
      }
      cb(err, data) ;
    });
  }
}

在 OrdersList 中，您应该使用真实的文件名和带回调的调用函数来读取文件内容：

class OrdersList extends React.Component {
    constructor(props, context) {
        super(props, context);
    }

    componentDidMount() {
        let reader = new FileReader(realFilePath);
        reader.getFileContent(',' , [], (err, content) => {
          // TODO: file content in content var
        });
    }
}

导入和导出 es6 类

importing and exporting es6 classes

javascript

ecmascript-6

reactjs

es6-modules