插件属性未添加到 React 中的 FilePond 对象答案

【问题标题】：Plugin properties are not added to FilePond object in React插件属性未添加到 React 中的 FilePond 对象
【发布时间】：2020-11-20 16:53:13
【问题描述】：

我正在尝试从filepond-plugin-image-preview plugin 设置imagePreviewMaxHeight，但无法识别。 FilePond 对象上似乎不存在预览插件上的所有属性。

这是我的代码：

import React, { useState } from 'react'
import { FilePond, registerPlugin } from 'react-filepond'
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation'
import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
import 'filepond/dist/filepond.min.css'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css'

registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview)

const ImageUploaderPage = () => {
 /* Needed to add typ any below since prop files seems to use type FilePondFile but onupdatefiles
on the other hand accepts ActualFileObject and some other types but not FilePondFile. */
  const [files, setFiles] = useState<any[]>([])

  return (
    <div>
      <h1>Image Uploader</h1>
      <FilePond
        acceptedFileTypes={['image/png', 'image/jpeg']}
        files={files}
        onupdatefiles={setFiles}
        allowMultiple={true}
        imagePreviewMaxHeight={100}
        server="/api"
        labelIdle="Choose files or drag them here."
      />
    </div>
  )
}

export default ImageUploaderPage

我正在使用 TypeScript，但我在其他领域遇到了一些问题，将其添加为评论，以防这也可能成为问题。

预览插件显然已注册，因为显示了所选图像...但是当我使用 oninit 和 ref 访问 FilePond 对象时，我可以确认不存在任何插件道具，只有默认道具。

编辑：我找到了一个我可以使用的属性 - styleItemPanelAspectRatio（它应该设置为格式 1 的字符串值，而不是像 stylePanelAspectRatio 那样的 1:1 。所以我现在很高兴......但上面的问题仍然存在。

【问题讨论】：

标签： reactjs plugins properties filepond

【解决方案1】：

似乎这是库中的一个问题，打字稿类型设置不正确。

解决方案： 临时修复是在抛出错误的属性上方添加// @ts-ignore。 IE。来自FilePondPluginImagePreview 的属性，例如imagePreviewHeight。

【讨论】：