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

问题描述

我正在尝试从imagePreviewMaxHeight设置filepond-plugin-image-preview plugin,但是无法识别。预览插件上的所有属性似乎都不存在于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而不是1:1的字符串值,例如stylePanelAspectRatio 。所以我现在很高兴...但是上面的问题仍然存在。

解决方法

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

解决方案::临时解决方法是在引发错误的属性上方添加// @ts-ignore。即FilePondPluginImagePreview中的属性,例如imagePreviewHeight