Question

我发现这个名为 upload.js

的redux-file-upload

import { FileUpload } from 'redux-file-upload'

<FileUpload

allowedFileTypes={['jpg', 'pdf']}
  data={{ type: 'picture' }}
  dropzoneId="fileUpload"
  url="./uploads/"
>
  <button>
    Click or drag here
  </button>
</FileUpload>

我想在React中使用它。此文件名为 Tab5.js ：

import React from 'react';
import './../css/bootstrap.css';
import './../css/styles.css';
import Modale from './modalProces';


class Tab5 extends React.Component {
    render () {
        return (
            <div>
                <FileUpload />
            </div>
        );
    }
}
 export default Tab5;

但每当我运行它时，Tab5都不显示。

我已安装：
-npm install --save redux
-npm install --save react-redux
-npm install --save-dev redux-devtools
-npm install --save redux-file-upload

我错过了任何进口产品吗？我做错了吗？我不习惯在React中编码，但我不得不做这个部分我只需要上传文件，然后将文件上传到上传文件夹。

请帮助我。

Answer 1

根据我对您的问题的理解，您要么使用 upload.js 文件作为示例，并尝试在 Tab5.js 中实施FileUpload，或者您想要使用 upload.js 作为 Tab5.js 中的一个组件。我会尝试解决这两个问题。可以找到redux-file-upload库的文档here。

如果您使用upload.js作为组件

您已在 upload.js 中设置文件上传组件，但该文件未导出任何内容，您也缺少整个类声明和render()函数，如下所示：

import React from 'react'
import { FileUpload } from 'redux-file-upload'
//any other imports you need

export class Upload extends React.Component {

    render() {
        return(
            <FileUpload
                allowedFileTypes={['jpg', 'pdf']}
                data={{ type: 'picture' }}
                dropzoneId="fileUpload"
                url="./uploads/"
                >
                <button>
                    Click or drag here
                </button>
            </FileUpload>
        )
    }
}

然后在 Tab5.js 中，您将导入并使用上传作为组件。

import React from 'react';
import './../css/bootstrap.css';
import './../css/styles.css';
import Modale from './modalProces';
import Upload from './upload'; //import the upload.js file


class Tab5 extends React.Component {
    render () {
        return (
            <div>
                <Upload />
            </div>
        );
    }
}
export default Tab5;

如果您使用upload.js作为示例

dropzoneId和url是必需的属性。所以 Tab5.js 至少看起来像这样（你可能也想添加其他选项）：

import React from 'react';
import { FileUpload } from 'redux-file-upload'; //add in the redux-file-upload import
import './../css/bootstrap.css';
import './../css/styles.css';
import Modale from './modalProces';


class Tab5 extends React.Component {
    render () {
        return (
            <div>
                <FileUpload 
                    dropzoneId="fileUpload"
                    url="./uploads/"
                >
                    <button>
                        Click or drag here
                    </button>
                </FileUpload>
            </div>
        );
    }
}
export default Tab5;

如何在我的React App中包含“redux-file-upload”

1 个答案:

如果您使用upload.js作为组件

如果您使用upload.js作为示例