reactjs - 使用 React 升级 DropTarget

Question

如何在 React 中使用 Uppy DropTarget 插件？

我正在尝试做一些类似的事情。但不起作用。

import React from 'react'
import { DragDrop, useUppy } from '@uppy/react'

const Dropzone: React.FC = () => {

const uppy = useUppy(() => {
    return new Uppy()
      .use(Tus, {
        endpoint: 'https://tusd.tusdemo.net/files/', // use your tus endpoint here
        retryDelays: [0, 1000, 3000, 5000],
      })
      .use(DropTarget, {
        target: '#dropzone',
      })
})

return (
    <>
      <div
        id="dropzone"
        data-id="dropzone-inner"
        className="flex items-center"
      >
      </div>
    </>
)}

在此处输入图像描述

Answer 1

当 Uppy 被实例化时，你想要作为 DropTarget 目标的元素不会被渲染。您必须在 useEffect 挂钩中使用 DropTarget 插件：

import React, { useEffect } from 'react';
import Uppy from '@uppy/core';
import { useUppy } from '@uppy/react';
import Tus from '@uppy/tus';
import DropTarget from '@uppy/drop-target';

const Dropzone: React.FC = () => {
  const uppy = useUppy(() => {
    return new Uppy().use(Tus, {
      endpoint: 'https://tusd.tusdemo.net/files/', // use your tus endpoint here
      retryDelays: [0, 1000, 3000, 5000],
    });
  });

  useEffect(() => {
    uppy.use(DropTarget, {
      target: '#dropzone',
    });
  }, []);

  return (
    <div
      id="dropzone"
      data-id="dropzone-inner"
      className="flex items-center"
    />
  );
};