使用 ReactJS 列出文件夹内容

Question

我正在尝试使用 npm文件系统列出服务器上给定路径的文件和文件夹。据我了解，浏览器（客户端）不允许使用 Javascript 访问文件系统，但如果我从服务器运行 javascript，则应该允许访问文件系统。

因此，我创建了一个 ReactJS 应用程序，按照此处的教程执行服务器端渲染（或者您可以获取 git 代码并在此处开箱即用地构建/运行它）。

我可以在禁用浏览器的 javascript 的情况下调用 Date.now() 等基本函数，证明 javascript 正在服务器上运行，但是当我插入以下代码时，我收到错误。

为什么我的服务器代码无法识别 fs？

组件代码：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as userActions from '../actions/user'
import { Link } from 'react-router-dom'
import './FirstPage.css'
var fileSystem = require("file-system")

class FirstPage extends Component {

render() {

  fileSystem.recurse('./', ['*.*'], 
    function(filepath, relative, filename) {
    if (filename) {
   console.log("FILE"+filename);
    } else {
    console.log("FOLDER"+filepath);

    }
  });

    let time = Date.now();


    const b64 = this.props.staticContext ? 'wait for it' : window.btoa('wait for it')
    return (
      <div className='bold'>
        <h2>First Page</h2>
        <p>{`Email: ${this.props.user.email}`}</p>
        <p>{`b64: ${b64}`}</p>
        <p>{time}</p>

        <Link to={'/second'}>Second</Link>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  user: state.user
})

const mapDispatchToProps = dispatch => ({
  userActions: bindActionCreators(userActions, dispatch)
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(FirstPage)

错误：

file-system.js:223 Uncaught TypeError: i.readdir is not a function
    at r (file-system.js:223)
    at Object.t.recurse (file-system.js:244)
    at t.value (FirstPage.js:14)
    at p._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:796)
    at p._renderValidatedComponent (ReactCompositeComponent.js:819)
    at performInitialMount (ReactCompositeComponent.js:359)
    at p.mountComponent (ReactCompositeComponent.js:255)
    at Object.mountComponent (ReactReconciler.js:43)
    at performInitialMount (ReactCompositeComponent.js:368)
    at p.mountComponent (ReactCompositeComponent.js:255)
r @ file-system.js:223
t.recurse @ file-system.js:244
value @ FirstPage.js:14
_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:796
_renderValidatedComponent @ ReactCompositeComponent.js:819
performInitialMount @ ReactCompositeComponent.js:359
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
mountChildren @ ReactMultiChild.js:234
_createInitialChildren @ ReactDOMComponent.js:701
mountComponent @ ReactDOMComponent.js:520
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
a @ ReactMount.js:102
perform @ Transaction.js:141
u @ ReactMount.js:124
perform @ Transaction.js:141
batchedUpdates @ ReactDefaultBatchingStrategy.js:60
i @ ReactUpdates.js:95
_renderNewRootComponent @ ReactMount.js:317
_renderSubtreeIntoContainer @ ReactMount.js:399
render @ ReactMount.js:420
(anonymous) @ index.js:15
t @ bootstrap 7ba872b0d973a86c97b4:19
(anonymous) @ main.0dc33d67.js:30531
t @ bootstrap 7ba872b0d973a86c97b4:19
(anonymous) @ bootstrap 7ba872b0d973a86c97b4:65
(anonymous) @ bootstrap 7ba872b0d973a86c97b4:65

Answer 1

您可以使用以下方法来做到这一点：

列出目录中的 React 组件文件

列表反应文件

https://www.npmjs.com/package/list-react-files

安装

$ npm install --save list-react-files

用法

import listReactFiles from 'list-react-files'

listReactFiles(__dirname).then(files => console.log(files))