使用 ReactJS 的无效 dropzone 元素

Question

获取“无效的 dropzone 元素”。我放了

 var Dropzone = require('react-dropzone');

在我认为可以启用 Dropzone 元素的 webpack.config.js 文件中。

这是我的 javscript 文件中的内容，取自 Github 示例：

var DropzoneFileUploader = React.createClass({
    onDrop: function(files){
        files.forEach((file)=> {

            console.log(file);

        });
    },

    render: function () {
      return (
          <div>
            <Dropzone onDrop={this.onDrop}>
              <div>Try dropping some files here, or click to select files to upload.</div>
            </Dropzone>
          </div>
      );
    }
});

ReactDOM.render(<DropzoneFileUploader />,
                document.getElementById('container'));

错误是当我使用<Dropzone> 标签时。我还在我的 html 文件中包含了 dropzone 脚本。我无法将 require 模块放入 javascript 文件中，因为它会给我错误“require is not defined”

    <script src="js/dropzone.js"></script>

Answer 1

你应该在你的 javascript 文件中导入 react-dropzone，而不是在你的 webpack 配置中。

你的javascript是由webpack构建的吗？还是按原样包含在内？

require 是 webpack 提供的一个函数。如果你使用 webpack 构建文件，你不会得到错误。