Draggable React typescript 扩展组件

Question

我是 React 和 Typescript 的初学者。想要制作一些带有拖动效果的很酷的打开窗口。找到draggable包，但我不明白如何像扩展组件一样使用它。

通过电话写作。但会很高兴看到一些帮助......

我找到了很多关于 JS 的帖子，但我找不到一些 TS 的例子。请 - 有人可以给我一个小例子，我如何在导出组件中使用此包的简单拖动效果:(

Answer 1

首先，正如 Aluan 提到的：所有 TS 底层都是 JS，因此您可以在 TS 项目中使用 JS 文件而不会出现错误，它们只是无类型的。你遇到的唯一问题是，如果你尝试在 JS 项目中使用 TS，这将不起作用，需要转换。

其次，您正在寻找的解决方案可以通过多种方式完成。这是使用 prime React 和 TSX 的示例。

import React, { useState } from 'react';
import { Dialog } from 'primereact/dialog';
import { Button } from 'primereact/button';

interface DraggableDialogProps {
  visible: boolean;
  onHide: () => void;
}

const DraggableDialog: React.FC<DraggableDialogProps> = ({ visible, onHide }) => {
  const [position, setPosition] = useState({ top: 50, left: 50 });

  const handleDrag = (e: React.DragEvent<HTMLDivElement>) => {
    setPosition({
      top: e.clientY,
      left: e.clientX,
    });
  };

  return (
    <Dialog
      header="Draggable Dialog"
      visible={visible}
      style={{ width: '300px', position: 'absolute', top: `${position.top}px`, left: `${position.left}px` }}
      onHide={onHide}
      draggable
      onDrag={(e) => handleDrag(e)}
    >
      <div>
        <p>This is some basic content in a draggable dialog.</p>
      </div>
    </Dialog>
  );
};

const App: React.FC = () => {
  const [dialogVisible, setDialogVisible] = useState(false);

  const showDialog = () => {
    setDialogVisible(true);
  };

  const hideDialog = () => {
    setDialogVisible(false);
  };

  return (
    <div>
      <Button label="Show Dialog" onClick={showDialog} />
      <DraggableDialog visible={dialogVisible} onHide={hideDialog} />
    </div>
  );
};

export default App;

作者注：

我看到您是新贡献者，欢迎！ 这里有一个友情链接，解释了如何对待您的问题的答案！