如何将CodePen JS文件重写为React应用程序并根据外部脚本添加依赖项

Question

我想通过上传简单文件在React应用程序中演示FilePond模块。我有CodePen示例：

https://codepen.io/rikschennink/pen/WXavEx

如果转到“设置”然后转到“JavaScript”选项卡，则可以在此CodePen项目中找到许多外部脚本/笔。我的问题是我们如何将这个JS文件重新编写到React文件中，我们如何识别要安装的依赖项？

/*
We want to preview images, so we need to register the Image Preview plugin
*/
FilePond.registerPlugin(

    // encodes the file as base64 data
  FilePondPluginFileEncode,

    // validates the size of the file
    FilePondPluginFileValidateSize,

    // corrects mobile image orientation
    FilePondPluginImageExifOrientation,

    // previews dropped images
  FilePondPluginImagePreview
);

// Select the file input and use create() to turn it into a pond
FilePond.create(
    document.querySelector('input')
);

Answer 1

将此模块用于React和FilePond！

github.com/pqina/react-filepond