Question

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

因此，我已经创建了一个ReactJS应用程序，它通过遵循教程here来执行服务器端呈现（或者您可以获得代码并在框中here构建/运行它）。< / p>

我可以调用Date.now（）这样的基本函数，并禁用浏览器的javascript，证明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))

Answer 2

尝试使用， 列表文件npm软件包， 因为它可以用来列出目录中包含特定“字符串”的所有文件。

请参阅下面的链接了解它：

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

安装：

npm i list-files

示例用例：在名为“ dir”的特定目录中查找所有带有“ pdf”的文件

var find = require('list-files');


find(function(result) {
    console.log(result);
}, {
    dir: 'dir',
    name: 'pdf'
});

使用ReactJS列出文件夹内容

2 个答案:

列表反应文件