reactjs - 使用 ReactJS 列出文件夹内容

Question

我正在尝试使用 npm file-system列出我服务器上给定路径的文件和文件夹。我知道不允许从浏览器(客户端)使用 Javascript 访问文件系统，但如果我从服务器运行 javascript 应该允许它。

因此，我按照教程 here 创建了一个执行服务器端渲染的 ReactJS 应用程序。 (或者您获得 git 代码并立即构建/运行它 here )。

我可以在禁用浏览器的 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 组件文件

列出 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))